끌어서 놓기 문제

Question

내 웹 사이트에서 끌어서 놓기를 수행해야합니다. 나는 광장에서 드래그 앤 드롭으로 하나를 선택해야하는 두 가지 옵션이 있습니다. 첫 번째 문제는 한 항목을 끌 때 다시 끌 수없고 두 번째 문제는 사각형과 항목의 위치를 ​​이동할 때 끌어서 놓기가 작동하지 않는다는 것입니다. 누군가 나를 도와 줄 수 있습니까? 또는 내 개념에 맞는 jQuery 플러그인이 있습니까?

Answer 1

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)"> 
 
<img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)">

당신이 옆에 이미지가 삭제 될 것 사업부와 같은 동일한 사업부를 이미지를 포장해야합니다.

당신이 언급 한 자바 스크립트 부분은 괜찮아 보입니다. div 안에 이미지를 그냥 두십시오.

두 번째 prob에 대해 자세히 알려주십시오. 당신은 당신의 코멘트 광장의 위치 및 항목

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;"></div> 
 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;"> 
 
     <img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)" width="100" height="100" /> 
 
     <img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)" width="100" height="100" /> 
 
    </div>