JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>
<ul>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

CSS

body
{
    font-family: Arial, Tahoma, Sans-Serif;
}
ul
{
    border: solid 1px #aaa;
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    width: 150px;
}
li
{
    border: solid 1px #ccc;
    cursor: move;
    padding: 10px;
}

JavaScript

$('ul').sortable({
    connectWith: 'ul',
    revert: 500,
    receive: function(ev, ui)
    {
        // neither this, nor 'stop' work
        // $(ui.sender).sortable('cancel');
    },
    stop: function()
    {         
        $(this).sortable('cancel');
    }
});