JQuery-Event-Trigger basierend auf HTML5-Änderung

Question

Ich erstelle ein Board, mit dem ein Benutzer Elemente zwischen den Board-Kategorien anklicken und ziehen kann. Sobald ein neues Element hinzugefügt wurde, möchte ich zur Bestätigung ein Symbol in der Kategorie anzeigen .

Aber meine Frage ist, mit JS, wie würde ich das Symbol auslösen, wenn ein Element in seine Kategorie gezogen wird?

<div id="board"> 
<ul id="catagory-1"> 
    <li id="item1" draggable="true" class="item">item1</li> 
    <li id="item2" draggable="true" class="item">item2</li> 
    <li id="item2" draggable="true" class="item">item3</li> 
</ul> 

<ul id="catagory-2"> 
<span id="icon2" style="display:none">icon</span> 

</ul> 
<ul id="catagory-3"> 
<span id="icon3" style="display:none">icon</span> 

</ul> 
</div> 

ich Stellen Sie sich meine JQuery so etwas wie dieses würde (aber offensichtlich nicht funktioniert):

$('#catagory-2').bind("DOMSubtreeModified",function(){ 
    $('#icon2').toggle(); 
    }); 

Answer 1

Alles was Sie brauchen HTML5 und ein wenig Javascript ist. Keine Notwendigkeit für jQuery.

Here's a complete JSFiddle demo. Lassen Sie mich wissen, wenn es hilft:

Einige Code:

var draggedID; 

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

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

    if (draggedID.split('-')[1] == (ev.target.id).split('-')[1]) { 
     document.getElementById('icon-'+dragged).style.display = "block"; 
    } 
}