JSFiddle - React, Tailwind, and code Playground

by nachiket

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;
} 
    
    div1 {
   border:1px solid #000000;
    padding:25px;
}
    .red {
    border:1px solid #ff0000;
    }
-->
</style>
       
    </head>
    
    <body style="padding:55px;">
        <div id="nfo"> </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><li class="lt">Drag me</li><li class="lt">Drag me</li><li class="lt">Drag me</li><li class="lt">Drag me</li><li class="lt">Drag me</li><li class="lt">Drag me</li></div><br /><br />

    </body>
</html>

JavaScript

$('#div1').sortable({
            
                    receive: function(e, ui) { sortableIn = 1; },
                    over: function(e, ui) { sortableIn = 1; },
                    out: function(e, ui) { sortableIn = 0; },
                    beforeStop: function(e, ui) {
                       if (sortableIn == 0) { 
                          ui.item.remove();
                          //ui.item.draggable();
                       } 
                    }
                });