獲取丟棄的元素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" />