JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<h1>Open up Firebug console or webkit inspector console</h1>
<div id="tasid" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

CSS

#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; }

#tasid { width: 100px; height: 100px; top: 40px; left: 10px; }

JavaScript

$('#tasid').draggable({
    start: function(event, ui) {
        $( this ).data("originalPosition", ui.originalPosition);
    }
});

$("#droppable").droppable({
    drop: function(event, ui) {
        console.log( ui.draggable.data("originalPosition") );
    }
});