JSFiddle - React, Tailwind, and code Playground

HTML

Click add then drag. If you know how to make it stop dragging only if form is in there, without causing UI errors, I would be very happy.

<ul id="mainlist">
<li>
    Bucket 1
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
    </ul>
</li>
<li>
    Bucket 2
    <div id="empty-state">
        Oh I'm so empty! <a href="#" id="add">Add</a>
    </div>

</li>
</ul>

<form style="display:none;" id="add-form">
    <input type="text" />
</form>

CSS

body { padding: 50px; }
li { background-color: #EFEFEF; }
ul { padding: 10px; }
ul ul { padding: 0px; border-left: solid 1px #CCC; border-right: solid 1px #CCC; }
li li { background-color: #FFF; padding: 10px; border-bottom: solid 1px #CCC; }
form { display: block; }

JavaScript

$('#mainlist').sortable()
    .on( 'sortstart', function( e, ui ) {
        if ( ui.item.find( '#add-form' ).length ) {
         console.log( 'I dont want sorting' );
          // any attempt to return false, stop propogation, use sort cancel will cause ui.helper is null error - anyone know a workaround?            
        }
    });