获取丢弃的元素ID而不是放弃目标ID

Question

我对jQuery相当陌生，并且试图获取拖动的图像元素ID以追加到放置目标而不是图像元素本身或放置目标ID。我正在使用html5原生DnD。到目前为止，我可以通过使用drag函数中的datatransfer方法和drop中的getdata函数通过id发送元素来追加元素。每当我尝试从下拉列表中调用该标识时，它将获取放置目标标识而不是拖动的元素。

任何帮助将不胜感激，因为我已经在网上彻底搜索，只有更多的方法来获得放置区域的目标ID。这里是我当前的代码捣鼓的一个片段：

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

function dragStart(ev) { 

ev.dataTransfer.setData('Text/html', ev.target.id); // sends the dragged images data. 

//alert(ev.target.id); // alerts the correct id of the dragged image. 

} 


function drop(ev) { 

ev.preventDefault(); 
var data = ev.dataTransfer.getData("text/html");//retrieves dropped images data. 
ev.target.appendChild(document.getElementById(data));//this displays the dropped image. 

//alert(ev.target.id); // alerts the id of the drop target(Want to get the dropped images id.) 

//$("#mybillets").append("<span>"+ev.target.id+" </span>"); //appends the drop targets id(Want to append the dropped images id.) 
} 

Answer 1

在drop方法看起来像ev的事件对象，所以ev.target将指在其项目被丢弃的元素。因此使用ev.target.id来引用放置目标ID。

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

 
function drag(ev) { 
 
    ev.dataTransfer.setData('Text/html', ev.target.id); 
 
} 
 

 
function drop(ev, target) { 
 
    ev.preventDefault(); 
 
    console.log(target.id, ev.target.id) 
 

 
    var data = ev.dataTransfer.getData("text/html"); 
 
    alert(data) 
 
}

#div1 { 
 
    width: 350px; 
 
    height: 70px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 
 
<br/> 
 
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

Answer 2

由于@Arun P佐尼。在这个简单的例子上做得很好。

不过，我只是想补充一点，如果你尝试从“A”标签拖动，你就不会有太多的运气。

这将不工作（在所有浏览器）：

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#"> 
<img src="//placehold.it/336X69/ff0000" width="336" height="69" /> 
</a> 

但是这会工作（更多的浏览器）：

<img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" /> 

这花了我很长的时间去发现了这一点，因为许多浏览器不会返回或让您获得拖动的源代码。 这个例子应该透露给你的源ID中的警报，并且控制台：

<script> 
    function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

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

    function drop(ev, target) { 
     ev.preventDefault(); 
     console.log(target.id + " : " + ev.target.id) 
     console.log(ev.dataTransfer.getData("text/html")); 
     console.log(ev.dataTransfer.getData("text")); 
     var data = ev.dataTransfer.getData("text"); 
     alert(data) 
    } 
</script> 
<style "type="text/css"> 
     #div1 
     { 
      width: 350px; 
      height: 70px; 
      padding: 10px; 
      border: 1px solid #aaaaaa; 
     } 
</style> 

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div> 
<br/> 
<img id="drag1" src="http://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />