JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
<style type="text/css">
<!--
li {
   border:1px solid #000000;
} 
    
    div {
   border:1px solid #000000;
}
    .red {
    border:1px solid #ff0000;
    }
-->
</style>
        <script type="text/javascript">
            $(document).ready(function ust()
            {    
                $('.myclass').sortable({ connectWith: '.myclass',  revert: 'true', cursor: "move", });    
                $(".myclass").bind( "sortstart", function(event, ui)
                {
                    $('#div1').sortable('destroy');
                    $('#blub').html('DIV 1 sortable destroy (dont work)<br /> All LIs in DIV 1 are droppable now (work)');
                    $("#div1 .lt").droppable(
                    {
                        hoverClass: 'red',
                        drop: function(event, ui)
                        {
                            $(this).addClass('red');           
                        }
                    });
                });
            });
        </script>
        
    </head>
    
    <body style="padding:55px;">
        <div id="blub">DROP a "Drag me" from DIV 2 or from DIV 3 into DIV 1 </div><hr /><br /><br />
       DIV 1 <div id="div1" class="myclass"><li class="lt">Drag me</li><li class="lt">Drag me</li><li class="lt">Drag me</li></div><br /><br />
       DIV 2 <div id="div2" class="myclass"><li>Drag me</li><li>Drag me</li><li>Drag me</li></div><br /><br />
       DIV 3 <div id="div3" class="myclass"><li>Drag me</li><li>Drag me</li><li>Drag me</li></div><br /><br />
    </body>
</html>