JSFiddle - React, Tailwind, and code Playground

by zunme

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

     <div class="container">


      <div>
        <div class="row">
          <div class="col-sm-4 col-xs-6">
            	<ul id="categoryul" class="sortable">
													<li class="dropable" data-idx="cate_1" data-sort="2" data-type="ct"><span class="handle">MoveIcon </span>Cate 1</li>
													<li class="dropable" data-idx="cate_2" data-sort="3" data-type="ct"><span class="handle">MoveIcon </span>Cate 2</li>
              </ul>
          </div>

          <div class="col-sm-4 col-xs-6">
            	<ul id="channelul" class="sortable">
													<li class="dragable" data-idx="chidx_11" data-sort="1" data-type="ch" data-start="0"><span class="handle">MoveIcon </span>Members1</li>
													<li class="dropable" data-idx="chidx_12" data-sort="2" data-type="ch" data-start="1"><span class="handle">MoveIcon </span>Members2</li>
													<li class="dragable" data-idx="chidx_13" data-sort="3" data-type="ch" data-start="2">Members3</li>
													<li class="dropable" data-idx="chidx_14" data-sort="4" data-type="ch" data-start="3"><span class="handle">MoveIcon </span>Members4</li>
													<li class="dragable" data-idx="chidx_15" data-sort="5" data-type="ch" data-start="4">Members5</li>
													<li class="dropable" data-idx="chidx_16" data-sort="6" data-type="ch" data-start="5">Members6</li>
                          <li class="dropable" data-idx="chidx_16" data-sort="6" data-type="ch" data-start="6">Members7</li>
                          <li class="dropable" data-idx="chidx_16" data-sort="6" data-type="ch" data-start="7">Members8</li>
                          <li class="dropable" data-idx="chidx_16"...

CSS

.sorted{background-color:red;color:white;}

JavaScript

var sortedlist;
$(document).ready( function(){
  $(".dropable").droppable({
      drop: function( event, ui ) {
        if($(this).data('type') == 'ct' && ui.draggable.data('type') == 'ch') {
        	if( confirm (ui.draggable.text() + "채널을 " + $(this).text() + "카테고리로 옮기겠습니까?")) {
          		alert( ui.draggable.data("idx") + "를" + $(this).data('idx') + "로 옮김" );
              ui.draggable.remove();
          }; 
        }
      }
  });
  $(".sortable").sortable({
	  handle: '.handle',
    cursor: 'move',  
		//start : function(event, ui) {
		//	ui.item.data('start_pos', ui.item.index());
		//},
  	update:function( event, ui ) {
    	var indexno = ui.item.index();
      var nextno = indexno+2;
      ui.item.addClass("sorted")
      //console.log("next:"+ nextno);
    	//console.log("this:" +indexno );
      //console.log("size:" +$("#channelul li").size() );
      //console.log("start :"+ui.item.data('start_pos') )
      
      if(indexno + 1 < $("#channelul li").size() ){
      	console.log ( $('#channelul li:nth-child(' + nextno + ')' ).text() );
      }else {
      	console.log( ui.item.text() + ": new sort no 1");
      }
      sortedlist = $("#channelul").sortable( "serialize", {attribute: "data-idx"});
      console.log(sortedlist);
      console.log($("#categoryul").sortable( "serialize", {attribute: "data-idx"}) );
    }
  });
});