JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="drag">drag</div>
<hr>
<div class="drop">
    <div class="drop"></div>
    <div class="item">item</div>
</div>

CSS

body { margin: 5em; font-family:arial;}
.drag { padding:1em; background:#333; color:#fff; display: inline-block;}
.drop { padding: 2em; border:1px solid #ccc;}
.item {  padding: 1em; border:1px dashed blue;}
.ui-sortable-placeholder { padding: 2em; border:1px dotted #ccc; background:#eee;}

JavaScript

function dragDrop() {
    $('.drag').draggable({
        helper: 'clone',
        cursor: "move",
        connectToSortable: '.drop'
    });
    $('.drop').sortable({
        receive: function (event, ui) {
            $(this).children('.drag').replaceWith('<div class="drop"></div>');
        },
        sort: function(event, ui) {
            /* check if placeholder position is 0 add back placeholder */
            var pos = ui.placeholder.position();
            if(pos.left == 0 & pos.top == 0) {
                $(ui.item).after(ui.placeholder);
            }
        },
        stop: function (event, ui) {
            dragDrop();
        },
        cursor: "move",
        helper: 'clone',
        tolerance: "pointer",
        placeholder: 'ui-sortable-placeholder',
        connectWith: '.drop'
    });

}

dragDrop();