JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

<div id="dropwin"></div>
<div id="dragables">
    <div id="d1" class="d"></div>
    <div id="d2" class="d"></div>
    <div id="d3" class="d"></div>
    <div id="d4" class="d"></div>
</div>
<button id="b1">Remove d1</button>
<button id="b2">Remove d2</button>
<button id="b3">Remove d3</button>
<button id="b4">Remove d4</button>

CSS

#dropwin { width: 300px; height: 300px; border: 1px solid #f00;}
#dragables { width: 300px; height: 70px; border: 1px solid #00f; }
.d { width: 50px; height: 50px; margin: 10px; display: inline-block; }
#d1 { background: #f00; }
#d2 { background: #ff0; }
#d3 { background: #f0f; }
#d4 { background: #0ff; }

JavaScript

$(function() {

    $(".d").draggable({
        containment: '#dropwin',
        stack: '#dragables div',
        cursor: 'move',
    });

    $('.d').each(function() {
        var top = $(this).position().top + 'px';
        var left = $(this).position().left + 'px';
        $(this).css({top: top, left: left});
    }).css({position: 'absolute'});

    $("#b1").on("click", function() {
        $("#d1").remove();
    });
    $("#b2").on("click", function() {
        $("#d2").remove();
    });
    $("#b3").on("click", function() {
        $("#d3").remove();
    });
    $("#b4").on("click", function() {
        $("#d4").remove();
    });

});