JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" />
<div class="demo ui-widget-content" id="demo">
<ul id="sortable">
<li><div class="ui-state-default" id="1" >1</div></li>
<li><div class="ui-state-default">2</div></li>
<li><div class="ui-state-default">3</div></li>
<li><div class="ui-state-default">4</div></li>
<li><div class="ui-state-default">5</div></li>
</ul>
</div>
<input type="button" name='Enable' id='Enable' value="Enable" />
<input type="button" name='Disable' id='Disable' value="Disable" />
CSS
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li {float: left; width: 100px; height: 100px; font-size: 4em; text-align: center; position:relative}
.demo{ width: 400px; height: 400px; padding:10px}
#sortable li div{
width:90px;
height:90px;
}
JavaScript
var original;
$( "#sortable li" ).draggable({
grid: [100,100],
containment:'#demo',
start:function(event, ui){
original = $(ui.helper).position();
}
});
$('#sortable li').each(function(){
$(this).css({top:$(this).position().top,left:$(this).position().left});
});
$('#sortable li').css({position:'absolute'});
$( "#sortable li" ).bind( "dragstop", function(event, ui) {
$( "#sortable li" ).each(function(){
if ($(this).hasClass('ui-draggable-dragging')) return;
if(compareOffset($(this).offset(),ui.offset)){
console.log(original);
$(this).animate({left:original.left,top:original.top});
console.log($(this).position());
return;
}
});
});
function compareOffset(offset1, offset2){
return offset1.top==offset2.top && offset1.left==offset2.left;
}
$('#Enable').click(function(){
$("#sortable li").draggable({
disabled : false
});
});
$('#Disable').click(function(){
$("#sortable li").draggable({
disabled : true
});
});