Draggable

See http://stackoverflow.com/questions/31097570/drag-drop-sortable-system-using-jquery

by tweissin

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="div1" class="first" >
    <img src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" id="drag1" width="88" height="31"/>
</div>

<div id="div2" class="first"></div>

<div id="div3" class="second"> 
    <ul>
	    <li id="draggable" draggable="true">Drag me down</li>
    </ul>
</div>
<br>
<br>
<br>
<br>

<ul id="sortable">
	<li class="ui-state-default" draggable="true">Item 1</li>
	<li class="ui-state-default" draggable="true">Item 2</li>
	<li class="ui-state-default" draggable="true">Item 3</li>
	<li class="ui-state-default" draggable="true">Item 4</li>
	<li class="ui-state-default" draggable="true">Item 5</li>
</ul>
    
</div>

CSS

#div1, #div2, #div3 {
    float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}

JavaScript

// Starting point: http://www.w3schools.com/html/html5_draganddrop.asp
$("img").on("dragstart", function(ev) {
    ev.originalEvent.dataTransfer.setData("text", ev.target.id);
});

$(".first").on("dragover", function(ev) {
    ev.preventDefault();
});

$(".first").on("drop", function(ev) {
    var data = ev.originalEvent.dataTransfer.getData("text");
    ev.originalEvent.target.appendChild(document.getElementById(data));
});

/////////////////////////
console.log($("#draggable"));
$("#draggable").on("dragstart", function(ev) {
    console.log("#draggable");
    ev.originalEvent.dataTransfer.setData("text", ev.target.id);
});

$("#sortable").on("dragover", function(ev) {
    ev.preventDefault();
});

$("#sortable").on("drop", function(ev) {
    var data = ev.originalEvent.dataTransfer.getData("text");
    ev.originalEvent.target.appendChild(document.getElementById(data));
});

$(".second").on("dragover", function(ev) {
    ev.preventDefault();
});

$(".second").on("drop", function(ev) {
    var data = ev.originalEvent.dataTransfer.getData("text");
    ev.originalEvent.target.appendChild(document.getElementById(data));
});