JSFiddle - React, Tailwind, and code Playground
HTML
<section id="user-levels">
<p>HTML5 Drag and Drop example</p>
<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Unassigned
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Leonardo</a>
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Raphael</a>
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Michelangelo</a>
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Donatello</a>
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Splinter</a>
<a draggable="true" class="user" ondragstart="dragUser(this, event)">Shredder</a>
</div>
<div id="contributors" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Contributors
</div>
<div id="editors" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Editors
</div>
<div id="admins" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Admins
</div>
<div class="clear"></div>
</section>
CSS
#user-levels {
width: 900px;
margin: 0 auto;
}
#super-admins, #admins, #editors, #contributors, #unassigned {
float: left;
width: 202px;
height: 170px;
padding: 5px 10px;
margin-right: 3px;
background: #eee;
text-align: center;
}
.user {
width: 100px;
padding: 0 5px;
display: block;
margin: 0 auto 3px;
text-align: center;
border: 1px solid #aaa;
background: #ddd;
cursor: move;
}
.clear {
clear: both;
}
JavaScript
var elements = [];
function dragUser(element, event) {
var index = elements.indexOf(element);
if (index == -1) {
// not already existing in the array, add it now
elements.push(element);
index = elements.length - 1;
}
event.dataTransfer.setData('index', index);
}
function dropUser(target, event) {
var element = elements[event.dataTransfer.getData('index')];
target.appendChild(element);
}