JSFiddle - React, Tailwind, and code Playground

by niphor

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div data-zone="name">
    <div class="section disabled" id="section-1">Some section template 1</div>
    <div class="section" id="section-2">Some section template 2</div>
    <div class="section" id="section-3">Some section template 3</div>
</div>


<button class="enable-button">Allow move</button>
<button class="disable-button">Disallow move</button>
<button class="trigger-button">Trigger stop</button>
<button id="add-section">Add Section</button>

CSS

.libraryaware-section {
 display:block;
  padding:4px;
}
.ui-state-highlight {
 background-color:#ffffd7;   
    height:20px;
    width:150px;
    
}

.disabled { background: #d9d9d9; color:#999; }

JavaScript

$("[data-zone]").sortable({
    placeholder: 'ui-state-highlight',
    disabled: true,
    cancel : ".section.disabled",
    beforeStop:function(event, ui) {
        alert('aaaaaa');
    }
})
    
    
    $(".enable-button").click(function(){
        var $zone = $('[data-zone]');              
        $zone.sortable('option', 'disabled', false);
        
    })
        
        
    $(".disable-button").click(function(){
        var $zone = $('[data-zone]');      
        $zone.sortable('option', 'disabled', true);
    })
        
        
    $(".trigger-button").click(function(){
        console.log('trigger-button clicked');
        var $zone = $('[data-zone]');
        console.log($zone);
        $('[data-zone]').trigger('beforeStop');
    });



        var cnt = 3;
        $("#add-section").click(function(){
cnt ++;
 var $zone = $("[data-zone]");
            $zone.append('<div class="section" id="section-' + cnt + '">Some section template ' + cnt + '</div>');
        });