JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<body style="cursor: auto;">
  <div id="list-A">
    <ul class="sortable2">
        <li class="ui-draggable">drag item 1</li>
        <li class="ui-draggable">drag item 2</li>
        <li class="ui-draggable">drag item 3</li>
        <li class="ui-draggable">drag item 4</li>
        <li class="ui-draggable">drag item 5</li>
        <li class="ui-draggable">drag item 6</li>
    </ul>
  </div>
</body>

CSS

li {
    border:1px dashed Gainsboro;
    background-color:cornflowerblue;
    color:FloralWhite;
    font-family:Cursive;
    display:inline-block;
    padding:8px;
    margin:2px;
}

ul {
    border:1px solid PowderBlue;
}

JavaScript

var $placeholder;

$('#list-A ul').sortable({
    start: function(event, ui) {
        ui.helper.before(ui.helper.clone().attr('style',''));
        ui.item.data('sorting', true);
    },
    sort: function(event, ui) {
        $placeholder = ui.placeholder.next();        
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});