基于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事件触发器

回答

相关问题