JSFiddle - React, Tailwind, and code Playground

by dazefs

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li style="width: 268px;">3</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

ul {
        width:280px;
        height: 422px;
        overflow:hidden;
        background:#CCC;
        padding:10px 0 0 10px;
    }
    li {
        float:left;
        margin:0 10px 10px 0;
        border:1px solid #333;
        background:#3E9;
        width:128px;
        height:128px;
        font-weight:bold;
        text-align:center;
        line-height:128px;
        list-style-type: none;
    }

JavaScript

$(function() {
        $('ul').sortable({
            opacity:0.6, // opacity of dragged element
            cursor:'move', // set cursor type
            tolerance:'pointer', // pointer hit
            revert:200, // animate into place
            change: function (e,ui) { // on DOM position changes
                //$(ui.placeholder).hide(300);
                //$(ui.helper).show(300);
            },

        });
    
    $('ul').sortable( "option", "containment", 'parent' );
    });