JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<ul class="sort">
    <li><span>Item 1</span><ul class="subsort"><li><span> test 1</span></li></ul></li>
<li><span>Item 2</span><ul class="subsort"><li><span> test 2</span></li></ul></li>
<li><span>Item 3</span><ul class="subsort"><li><span> test 3</span></li></ul></li>
   <li><span>Item 4</span><ul class="subsort"><li><span> test 4</span></li></ul></li>
    <li><span>Item 5</span><ul class="subsort"><li><span> test 5</span></li></ul></li>
    
    <div id="direction"></div>

CSS

ul{display:inline-block; min-height:25px;}
li{list-style:none; background-color:blue; margin:2px; }
span{color:white; background-color:grey; margin:2px;}

JavaScript

$(function(){
    var $sourceUL;
    var direction;
    //$("ul").sortable({connectWith:"ul"});
    
    

var position = 0;
$('body').mousemove(function(event) {


    if (event.pageY < position) {
        direction = "up";
        $("#direction").html("up");
    } else {
       direction = "down";
        $("#direction").html("down");
    }

    position = event.pageY;

});
http://stackoverflow.com/questions/10640413/jqueryui-sortable-make-two-sortables-move-simultaneously

$(".sort").sortable();    
    $(".sort ul").sortable({connectWith:".sort  ul",
                            start: function(event, ui){
                                $sourceUL = $(this);
                                
                            },
                            receive: function( event, ui ) {
                               
                                
                            
                            },
                           over: function(event, ui){
                                var $prev = $(this).parent().prev().children("ul");
                                var $next = $(this).parent().next().children("ul");
                               if(direction == "down")
                                 $(this).children(":nth-child(2)").appendTo($prev);
                               else
                                   $(this).children(":nth-child(2)").appendTo($next);
    
                            }
                           });
});