jQuery UI Setup & Drag-and-Drop Interactions

Drag-and-Drop with jQuery UI

<div id="draggable-card" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<div id="drop-target" class="ui-widget-header">
    <p>Drop here</p>
</div>

<script>
$("#draggable-card").draggable({ revert: "invalid" });

$("#drop-target").droppable({
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped Successfully!");
    }
});
</script>