JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="/home">
    <ul id="list1" class="list">
        <li><span>Item</span><input type="hidden" name="input_id[]" value="1" /></li>
        <li><span>Item</span><input type="hidden" name="input_id[]" value="2" /></li>
        <li><span>Item</span><input type="hidden" name="input_id[]" value="3" /></li>
        <li><span>Item</span><input type="hidden" name="input_id[]" value="4" /></li>
    </ul>
    <ul id="list2" class="list">
        
    </ul>
    
    <input type="submit" value="submit" />
</form>

CSS

.list{width:200px;height:200px;float:left;margin:0px;padding:0px;padding:5px;}
.list li{cursor:move;}

#list1{border:1px solid #000;}
#list2{border:1px solid #000;}

JavaScript

var mySortable = new Sortables('#list1, #list2', { 
    
    dragOptions: { 
        
        onEnter: function(element, droppable) {
            // HERE: element ENTERED droppable
            console.log(element, 'entered', droppable);
        }
        
    }
    
});