JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id='container'>
    <div class='parent'>
        <div class='child'>1</div>
        <div class='child'>2</div>
        <div class='child'>3</div>
        <div class='child'>4</div>
    </div>
</div>

CSS

#container {
    height:60px;
    background:dodgerblue;
}
.parent {
    float:left;
    height:60px;
    background:silver;
}
.child {
    float:left;
    width:50px;
    height:58px;
    background:#fff;
    border:1px solid;
}
.ui-sortable-placeholder {
    visibility: visible !important;
    background:rgba(0, 0, 0, 0.5) !important;
}

JavaScript

$('.parent').sortable({
    connectWith: '#container',
    revert: 0,
    helper: "clone",
});

$('#container').sortable({
    connectWith: '.parent',
});