HTML5の変更に基づくJqueryイベントトリガー

Question

ユーザーがボードカテゴリ間でアイテムをクリックしてドラッグできるボードを作成しています。新しいアイテムが追加されると、アイコンとしてカテゴリに表示することを確認します。

しかし、私の質問は、JSを使用してどのように項目がそのカテゴリにドラッグされたときに表示するアイコンをトリガーですか？

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

私はjQueryのこのようなものになるだろう（しかし、これは明らかに動作しません）想像：

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

Answer 1

必要なのは、HTML5とJavascriptのビットです。 jQueryの必要はありません。

Here's a complete JSFiddle demo。それが助け場合、私に教えてください：

いくつかのコード：

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"; 
    } 
}