获取已删除的元素ID而不是删除目标ID

我对jQuery相当新，并且我试图将拖动的图像元素id附加到放置目标而不是图像元素本身或放置目标id。 我正在使用html5原生DnD。 到目前为止，我可以通过使用drag函数中的datatransfer方法和drop中的getdata函数发送其id来获取元素本身。 每当我尝试从drop中调用该id时，它会获得drop target 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(""+ev.target.id+" "); //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; } 

Answer 2

感谢@Arun P Johny。 这个简单例子的出色工作。

但是，我只想补充一点，如果您尝试从“A”标签拖动，那么您将没有太多运气。

这不起作用（在所有浏览器中）：

但是这会起作用（在更多浏览器中）：

我花了很长时间才发现这一点，因为许多浏览器都没有返回或让你获得拖动内容的源ID。 此示例应在警报和控制台中显示您的源ID：