JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="image-editor">
                            <div id="jubcase" style="position:absolute; width:247.453px; height:488px;left:20px; top:20px">
                    <div id="gridhtml"><div data-pos="0" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:0px;left:0px;"></div>
<div data-pos="1" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:0px;left:123.7285px;"></div>
<div data-pos="2" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:162.748px;left:0px;"></div>
<div data-pos="3" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:162.748px;left:123.7285px;"></div>
<div data-pos="4" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:325.496px;left:0px;"></div>
<div data-pos="5" class="ui-droppable tempborder" style="position:absolute;width:123.7285px;height:162.748px;top:325.496px;left:123.7285px;"></div>
</div>
                    <div id="jubcaseimage"><img src="http://placehold.it/247x488/" width="100%" height="100%"></div>
                </div>
                    </div>
    <div id="drag-images">
    <div class="ui-draggable" style="background-image:url(http://i.imgur.com/F3Uwl9Q.jpg); background-position:center;"></div>
    </div>

CSS

.tempborder {
  border: 1px solid #DDD;
}
#drag-images {
    position:absolute; 
    left:300px; 
    top:20px;    
}
.ui-draggable {
  width: 100px;
  height: 100px;
  margin: 5px;
  display: inline-block;
}

JavaScript

$(".ui-draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.ui-draggable',
        revert: "invalid"
    });

    $(".ui-droppable").droppable({
        accept: ".ui-draggable"
    });