Jquery event trigger based on HTML5 change

Question

I'm creating a board that allows a user to click and drag items between the board categories and once a new item is added I would like an icon to show on the category, as a confirmation.

However my question is, using JS how would I trigger the icon to show when an item is dragged into its category?

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

I Imagine my Jquery would be something like this (but this obviously doesn't work):

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

Try out [THIS](http://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener/11546242#11546242). Doesn't need jquery :) — matt, Feb 23 '17 at 03:27

ITWitch · Accepted Answer · 2017-02-24T02:46:54.410

All you need is HTML5 and a bit of Javascript. No need for jQuery.

Here's a complete JSFiddle demo. Let me know if it helps:

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

Jquery event trigger based on HTML5 change

1 Answers1