JSFiddle - React, Tailwind, and code Playground

by 100thGear

HTML

<div id="draggables">
    <div id="draggable-1" style="border:1px solid black;position:absolute">
        <p>Item #1</p>
    </div><br />

    <div id="draggable-2" style="border:1px solid red;position:absolute;">
        <p>Item #2.</p>
    </div>
</div>
<br />
<div id="droppable" style="width:200px;height:100px;border:1px solid green;position:absolute">
    <p>Add Your Item</p>  
</div>

JavaScript

$(function() {
    $("#draggable-1").draggable({
        revert: "invalid"
    });
    $("#draggable-2").draggable({
        revert: "invalid"
    });

    $("#droppable").droppable({
        accept: "#draggables > div",
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            var currentId = $(ui.draggable).attr('id');
            if (currentId == "draggable-1") {
                alert("Adding Item #1.");
            } else {
                alert("Adding Item #2.");
            }
            $(this).append($(ui.draggable));
        }
    });
});