Click-Drag Trigger - no jQuery

by Flame Denise

HTML

<div id="board" class="row">
<h1>Displays an icon if item is dropped in its correct category.</h1>
</div>

<div id="board" class="row">

<ul id="catagory-1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <li class="title">Category 1</li>
    <li id="item-1" class="item" draggable="true" ondragstart="drag(event)">item1</li>
    <li id="item-2" class="item" draggable="true" ondragstart="drag(event)">item2</li>
    <li id="item-3" class="item" draggable="true" ondragstart="drag(event)">item3</li>
</ul>

<ul id="catagory-2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <li class="title">Category 2</li>
    <span id="icon-2" style="display:none">icon</span>
</ul>

<ul id="catagory-3" ondrop="drop(event)" ondragover="allowDrop(event)">
    <li class="title">Category 3</li>
    <span id="icon-3" style="display:none">icon</span>
</ul>

</div>

<div class="row">
Code credits:
<a href="https://www.w3schools.com/html/html5_draganddrop.asp" target="_blank">w3Schools</a>
</div>

CSS

ul {
  border: solid 1px red;
  display: inline-block;
  float: left;
  min-height: 200px;
  padding: 10px;
  width: 200px;
}

li {
  list-style-type: none;
  border: solid 1px blue;
  cursor: move;
  font-weight: bold;
  margin: 10px 0;
  padding: 5px;
  text-align: center;
}

li.title {
  background-color: grey;
  cursor: default;
}

#icon-2, #icon-3 {
  background-color: green;
  padding: 2px 0;
  text-align: center;
}

.row {
  clear: both;
}

JavaScript

var draggedID;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    draggedID = ev.currentTarget.id;
}

function drop(ev) {
		console.clear();
    console.log('dragged id = ' + draggedID);
    console.log('target id = '+ev.target.id);

		ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    
    var dragged = draggedID.split('-')[1];
    if (draggedID.split('-')[1] == (ev.target.id).split('-')[1]) {
    	console.log('correct');
      document.getElementById('icon-'+dragged).style.display = "block";
    }
}