JSFiddle - React, Tailwind, and code Playground

by ifaour

HTML

<div><button type="button">Add box</button></div>
<div id="droppable">Drop here</div>
<div id="droppable2">Out of scope!</div>
<div class="clear"></div>
<div id="cont">
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>
</div>

CSS

#droppable, #droppable2 {width: 200px; height: 200px; background-color: yellow; float: left; margin: 0 10px}
.clear {clear: both;}
.drag {width: 50px; height: 50px; background-color: red; float: left; margin: 0 5px}

JavaScript

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items",
        // if you want to disable the dragging after drop un-comment this
/*
        drop: function(e, ui) {
            $(ui.draggable).draggable({"disabled":true});
        }
        */
    });
    $('#droppable2').droppable();
    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable({
            revert: "invalid",
            scope: "items"
        });
    });
});