Javascript 基于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>

---

你所需要的只是HTML5和一点Javascript。不需要jQuery

。如果有帮助，请告诉我：

一些代码：

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

---

jQueryUI非常适合这个东西。不需要jquery:）至少给我一个线索哈哈，谢谢大家

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