Wyświetlenie id upuszczonych elementów zamiast docelowego identyfikatora upuszczenia

Question

Jestem całkiem nowy w jQuery i utknąłem próbując uzyskać identyfikator elementów przeciągniętych do dodania do celu upuszczenia zamiast samego elementu image lub id target drop. Używam natywnej wersji DnD HTML5. I do tej pory mogę pobrać sam element przez wysłanie przez jego id z metodą przesyłania danych w funkcji przeciągania i funkcji getdata w kropli. Ilekroć próbuję wywołać ten identyfikator z dropu, otrzymuje on identyfikator celu kropli zamiast przeciągniętych elementów.

Każda pomoc byłaby bardzo doceniana, ponieważ przeszukałem dokładnie online i znalazłem tylko kilka metod, aby uzyskać docelowy identyfikator obszaru upuszczenia. Oto fragment mojego obecnego kodu skrzypce:

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

W metodzie drop wygląda ev jest obiekt zdarzenia, tak ev.target będą odnosić się do elementu, który spadł na pozycję.

Użyj numeru ev.target.id, aby odwołać się do identyfikatora celu upuszczenia.

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

Dzięki @Arun P Johny. Doskonała praca nad tym prostym przykładem.

Jednakże, chciałem tylko dodać, że jeśli spróbujesz przeciągnąć z tagu "A", nie będziesz miał szczęścia.

Będzie to nie pracy (we wszystkich przeglądarkach):

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

Jednak to będzie działać (w kilku przeglądarek):

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

To zajęło mi dużo czasu, aby odkryć to uwagę , ponieważ wiele przeglądarek nie zwraca lub pozwala uzyskać identyfikator źródła tego, co przeciągasz. Ten przykład powinien ujawnić identyfikator źródłowy dla ciebie w pogotowiu, a także konsolę:

<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" />