JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<div id='container'>
    <div class='parent'>
        <div class='child'>Prod1</div>
        <div class='child'>Prod2</div>
        <div class='child'>Prod3</div>
    </div>
    <div class='parent'>
        <div class='child'>Prod4</div>
        <div class='child'>Prod5</div>
    </div>
</div>

CSS

* {
    margin:0;
}
html, body {
    height:100%;
}
#container {
    position:relative;
    height:70px;
    text-align:center;
    background:dodgerblue;
}
.parent {
    float:left;
    height:60px;
    margin:2.5px;
    border:1px solid black;
    /* background:silver;*/
}
.child {
    float:left;
    width:60px;
    height:60px;
    background:#fff;
    margin:0 2.5px;
}
.ui-sortable-placeholder {
}
.selected {
    position:relative;
    background:red;
    z-index:0;
}
.selectedGroup {
    z-index:1;
}
.selectedGroup .child {
    pointer-events:none;
}
.hidden {
    display:none;
}

JavaScript

$('.child').click(function () {
    $(this).toggleClass('selected');
    if (!$(this).parent().has(':not(.selected )').length) {
        $(this).parent().sortable('disable')
        // $(this).parent().addClass('selectedGroup');
    } else {
        $(this).parent().sortable('enable')
    }
});


$('.parent').sortable({
    connectWith: '.parent, #container',
    items: '.child, .parent',
    revert: 0,
    helper: 'clone',
    forceHelperSize: true,
    delay: 30,
    distance: 5,
    tolerence: 'pointer',
    start: function (e, ui) {
        console.log('parent - start!');
        console.log(ui);
    },
    receive: function (e, ui) {
        console.log('parent - receive!');
        console.log(ui);
        if (ui.sender.attr('id') == 'container') ui.item.after(ui.item.children('.child')).remove();
        else ui.item.before(ui.item.data('items'));
    },
    remove: function (e, ui) {
        console.log('parent - remove!');
        console.log(ui);
    },
    beforeStop: function (e, ui) {
        console.log('parent - before stop!');
        console.log(ui);
        ui.item.data('items', $('.selected.hidden'));
    },
    update: function (e, ui) {
        console.log('parent - update');
        console.log(ui);
    },
    stop: function (e, ui) {
        console.log('parent - stop!');
        console.log(ui);
        ui.item.closest('#container').find('.selected').removeClass('hidden');
        $('.selected').removeClass('selected');

    }
});



$('#container').sortable({
    connectWith: '.parent',
    items: '.parent',
    delay: 30,
    distance: 10,
    revert: 0,
    start: function (e, ui) {
        console.log('start - container!');
        console.log(ui.helper);
    },
    receive: function (e, ui) {
        console.log('receive - container');
        console.log(ui);
        //$(this).sortable('cancel');
        //console.log('cancelled !');
        var helper = ui.item.data('items');
        console.log('helper:');
       ...