JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">
<div class="eventsline">
<ul class="one droptrue selectable" id="first"></ul>
<ul class="one droptrue selectable" id="second"></ul>
<ul class="one droptrue selectable" id="third"></ul>
<div class="second">
<ul class="two dropfalse multi selectable">
<li class="elem draggable" id="ex1">1</li>
<li class="elem draggable" id="ex2">2</li>
<li class="elem draggable" id="ex3">3</li>
<li class="elem draggable" id="ex4">4</li>
<li class="elem draggable" id="ex5">5</li>
</ul>
</div>
</div>
</div>
CSS
.content {
width: 300px;
}
.one {
position:relative;
width: 100%;
height: 50px;
border: 1px solid blue;
}
.second {
width: 100%;
height: 50px;
margin-top: 50px;
border: 1px solid green;
}
.elem {
width: 50px;
height: 50px;
display: inline-block;
background-color: #ccc;
}
ul {
margin: 0;
padding: 0;
height: 100%;
}
.one li, .two li {
float: left;
margin: 0;
padding: 0;
}
JavaScript
$(function () {
$("ul.droptrue").sortable({
connectWith: "ul.one",
});
$("ul.dropfalse").sortable({
connectWith: "ul.droptrue",
dropOnEmpty: true,
appendTo: 'ul.droptrue',
});
$("ul#first").sortable({
connectWith: $("ul#second"),
sort: function (event, ui) {
var id = ui.item.data("id"),
items = $("ul.droptrue").find("[data-id='" + id + "']").not(ui.item);
items.css($.extend({
position: "absolute"
}, ui.position))
},
receive: function (event, ui) {
var idel = ui.item.attr('id');
ui.item.removeAttr("id").attr("data-id", idel).clone().appendTo('#second, #third').addClass('draggable1');
$(this).sortable('cancel');
}
});
$("ul.droptrue, ul.dropfalse").disableSelection();
});