JSFiddle - React, Tailwind, and code Playground

by ninadpachpute

HTML

<script src="http://threedubmedia.com/inc/js/jquery-1.4.2.min.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.0.min.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.0.min.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>

<ol>
   <li>Alpha</li>
   <li>Bravo</li>
   <li>Charlie</li>
   <li>Delta</li>
   <li>Echo</li>
   <li>Foxtrot</li>
   <li>Golf</li>
</ol>

CSS

ol {
   float: left;
   margin: 0 40px 0 0;
   padding: 0;
   }
li {
   list-style-position: inside;
   border: 1px solid #89B;
   background: #BCE;
   padding: 2px 5px;
   margin: 2px 0;
   width: 275px;
   cursor: move;
   }
.dragging {
   background-color: #BEE;
   border-color: #8BB;
   }

JavaScript

jQuery(function($){
   $('li')
      .drag("start",function( ev, dd ){
         $( this ).addClass('dragging');
      })
      .drag(function( ev, dd ){
         var drop = dd.drop[0],
         method = $.data( drop || {}, "drop+reorder" );
         if ( drop && ( drop != dd.current || method != dd.method ) ){   
            $( this )[ method ]( drop );
            dd.current = drop;
            dd.method = method;
            dd.update();
         }
      })
      .drag("end",function( ev, dd ){      
         $( this ).removeClass('dragging');
      })
      .drop("init",function( ev, dd ){
         return !( this == dd.drag );
      });   
   $.drop({
      tolerance: function( event, proxy, target ){
         var test = event.pageY > ( target.top + target.height / 2 );
         $.data( target.elem, "drop+reorder", test ? "insertAfter" : "insertBefore" );   
         return this.contains( target, [ event.pageX, event.pageY ] );
      }
   });
});