基於HTML5變化的Jquery事件觸發器

我正在創建一個允許用戶在棋盤類別之間單擊並拖動項目並添加新項目的棋盤我想要一個圖標顯示在類別上作爲確認。基於HTML5變化的Jquery事件觸發器

然而，我的問題是，使用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(); 
    });

來源

2017-02-23 Whirlwind991

jQuery的用戶界面是爲這個偉大的東西 –

試用[這]（http://stackoverflow.com/questions/2844565/is-there -a-JavaScript的jQuery的DOM的改變偵聽/ 11546242＃11546242）。不需要jquery :) – matt

給了我一個線索atleast哈哈，謝謝你傢伙 – Whirlwind991

所有你需要的是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"; 
    } 
}

來源

2017-02-23 04:31:48 ITWitch

多數民衆贊成在偉大的，謝謝！ – Whirlwind991

基於HTML5變化的Jquery事件觸發器

回答

相關問題