JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
    <div id="draggable" class="ui-widget-content"></div>
</div>
<div id="container" class="ui-widget-content">Drop blue box here..</div>

CSS

#draggable {
     width: 20px;
     height: 20px;
     background:blue;
     display:block;
     float:left;
     border:0px
 }
 #container {
     width:200px;
     height:200px;
     background:yellow;
     margin:25px;

JavaScript

$(function () {

    $("#draggable").draggable({
        helper: "clone",
        cursor: 'move'
    });
    $("#container").droppable({
        drop: function (event, ui) {
            var $canvas = $(this);
            if (!ui.draggable.hasClass('canvas-element')) {
                var $canvasElement = ui.draggable.clone();
                $canvasElement.addClass('canvas-element');
                $canvasElement.draggable({
                    containment: '#container'
                });
                $canvas.append($canvasElement);
                $canvasElement.css({
                    left: (ui.position.left),
                    top: (ui.position.top),
                    position: 'absolute'
                });
            }
        }
    });

});