JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sort">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

<button id="b1">Enable</button>
<button id="b2">Disable</button>

CSS

.item {
    display:block;
    background-color: Yellow;
    width: 100px;
    margin: 5px
}

.placeholder { 
    background-color: Green;   
    width: 100px;
}

JavaScript

$(document).ready(function() { 
    sort(true);
    
    $("#b1").click(function() {
        sort(true);
    });
    $("#b2").click(function() {
        sort(false);
    });
});

function sort(enable) {
    if(enable) {

        $("#sort").sortable({ 
            placeholder: "placeholder",
            forcePlaceholderSize: true
        });   
        
    } else {       
        
        $("#sort").sortable({ disabled: true });   
        
    }
}