JSFiddle - React, Tailwind, and code Playground

by jrweinb

HTML

<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<ol class="drag-list">
    <li id="draggable" class="draggable-default ui-state-highlight">
        <div>Drag me down</div>
    </li>
</ol>
<ol class="sortable">
    <li id="list_1">
        <div> <span class="disclose"><span></span></span>Item 1</div>
    </li>
        <li id="list_2">
        <div> <span class="disclose"><span></span></span>Item 2</div>
    </li>
      <li id="list_3">
        <div> <span class="disclose"><span></span></span>Item 3</div>
    </li>
      <li id="list_4">
        <div> <span class="disclose"><span></span></span>Item 4</div>
    </li>
      <li id="list_5">
        <div> <span class="disclose"><span></span></span>Item 5</div>
    </li>
             
        
    
</ol>

CSS

html {
		    background-color: #eee;
		}
		body {
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		    border-radius: 10px;
		    color: #444;
		    background-color: #fff;
		    font-size: 13px;
		    font-family: Freesans, sans-serif;
		    padding: 2em 4em;
		    width: 860px;
		    margin: 15px auto;
		    box-shadow: 1px 1px 8px #444;
		    -mox-box-shadow: 1px 1px 8px #444;
		    -webkit-box-shadow: 1px -1px 8px #444;
		}
		a, a:visited {
		    color: #4183C4;
		    text-decoration: none;
		}
		a:hover {
		    text-decoration: underline;
		}
		pre, code {
		    font-size: 12px;
		}
		pre {
		    width: 100%;
		    overflow: auto;
		}
		small {
		    font-size: 90%;
		}
		small code {
		    font-size: 11px;
		}
		.placeholder {
		    outline: 1px dashed #4183C4;
		    /*-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			margin: -1px;*/
		}
		.mjs-nestedSortable-error {
		    background: #fbe3e4;
		    border-color: transparent;
		}
		ol {
		    margin: 0;
		    padding: 0;
		    padding-left: 30px;
		}
		ol.sortable, ol.sortable ol {
		    margin: 0 0 0 25px;
		    padding: 0;
		    list-style-type: none;
		}
        ol{
            list-style-type: none;
        }
		ol.sortable {
		    margin: 4em 0;

		}

        ol.drag-list{
          padding-left:0px;  

        }
		.sortable li {
		    margin: 5px 0 0 0;
		    padding: 0;

		}
		.sortable li div {
		    border: 1px solid #d4d4d4;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		    border-color: #D4D4D4 #D4D4D4 #BCBCBC;
		    padding: 6px;
		    margin: 0;
		    cursor: move;
		    background: #f6f6f6;
		    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
		    background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed...

JavaScript

$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 2,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true,
    receive: function (event, ui) {
        $("ol.sortable").find("li.ui-state-highlight.ui-draggable")
            .removeClass("ui-state-highlight ui-draggable")
            .addClass("draggable-default").append('<div class="clearfix"></div>');;
       
        
    },
    stop: function (event, ui) {
    
    var parentEls = ui.item.parents()
            .map(function () {
                  return this.tagName;
                })
            .get();
    var count = 0;
    if (parentEls[1] == "LI")
    {
        if (count == 0){
            ui.item.last().add('<div class="clearfix todel"></div>').appendTo(ui.item.parent());
            count++;
        }
           if (count > 0){
            $( "div.todel" ).each(function() {
              $(this).detach();
            });
                   
            ui.item.last().add('<div class="clearfix todel"></div>').appendTo(ui.item.parent());
            count++;
        }
        
       
    }
}
});


$("#draggable").draggable({
    connectToSortable: "ol.sortable",
    helper: "clone",
    revert: "invalid"
});

$("ul, li").disableSelection();

$('.disclose').on('click', function () {
    $(this).closest('li')
        .toggleClass('mjs-nestedSortable-collapsed')
        .toggleClass('mjs-nestedSortable-expanded');
});