이미지를 드래그 할 수있게 만드는 방법 html

Question

내 사이트의 div에 이미지를 추가하는 세 개의 버튼이 있습니다. 이제 추가 된 이미지를 만들어 div에 드래그 할 수있게하십시오. 나는 div가 될 필요는 없다. 캔버스 일 수도 있고, 단지 이미지가 드래그 가능하도록 추가되기를 바랄 뿐이다.

발췌문 :

function addimage() { 
 
    var img = document.createElement("img"); 
 
    img.src = "http://bricksplayground.webs.com/brick.PNG"; 
 
    img.height = 50; 
 
    img.width = 100; 
 
    //optionally set a css class on the image 
 
    var class_name = "foo"; 
 
    img.setAttribute("class", class_name); 
 

 
    document.getElementById("myDiagramDiv").appendChild(img); 
 
    //document.body.appendChild(img); 
 
}

<div class="col-sm-7 text"> 
 
    <h1><strong>Div for the images</strong></h1> 
 
    <div class="description"> 
 
    <div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"></div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-5 text"> 
 
    <div class="description"> 
 
    <h1><strong>Text</strong></h1> 
 
    </div> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 2 osobe</button> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 4 osobe</button> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za vise od 4 osobe</button> 
 
</div>

Answer 1

사용 jQuery를 UI는 드래그 - https://jqueryui.com/draggable/ 여기

는 작업 예를

function addimage() { 
 
    var img = document.createElement("img"); 
 
    img.src = "http://bricksplayground.webs.com/brick.PNG"; 
 
    img.height = 50; 
 
    img.width = 100; 
 

 
    var class_name = "foo"; 
 
    img.setAttribute("class", class_name); 
 
    
 
    document.getElementById("myDiagramDiv").appendChild(img); 
 
    $(img).draggable(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 

 
<div class="col-sm-7 text"> 
 
    <h1><strong>Div for the images</strong></h1> 
 
    <div class="description"> 
 
    <div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"></div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-5 text"> 
 
    <div class="description"> 
 
    <h1><strong>Text</strong></h1> 
 
    </div> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 2 osobe</button> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 4 osobe</button> 
 
    <button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za vise od 4 osobe</button> 
 
</div>

,536입니다