JSFiddle - React, Tailwind, and code Playground

by anderszvensson

HTML

<script src="https://rawgit.com/ilikenwf/nestedSortable/2.0alpha/jquery.mjs.nestedSortable.js"></script>
<body>
    <header>
        <h1>nestedSortable jQuery Plugin</h1>

        <h2>2.0</h2>
    </header>

    <section>
        <p>This is the demo page for the nestedSortable jQuery plugin.</p>

        <p><strong>Follow the development, read the docs and download the
        latest version directly from the <a href="https://github.com/ilikenwf/nestedSortable">GitHub
        page</a>.</strong></p>
    </section><!-- END section -->

    <section id="demo">
		<ol class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">
		   <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_2">
		   <div class="menuDiv">
			   <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
			   <span></span>
			   </span>
			   <span title="Click to show/hide item editor" data-id="2" class="expandEditor ui-icon ui-icon-triangle-1-n">
			   <span></span>
			   </span>
			   <span>
			   <span data-id="2" class="itemTitle">a</span>
			   <span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">
			   <span></span>
			   </span>
			   </span>
			   <div id="menuEdit2" class="menuEdit hidden">
				   <p>
					   Content or form, or nothing here. Whatever you want.
				   </p>
			   </div>
		   </div>
		   <ol>
			   <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_4">
			   <div class="menuDiv">
				   <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
				   <span></span>
				   </span>
				   <span title="Click to show/hide item editor" data-id="4" class="expandEditor ui-icon ui-icon-triangle-1-n">
				   <span></span>
				   </span>
				   <span>
				   <span data-id="4" class="itemTitle">c</span>
				   <span title="Click to delete item."...

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;
		}
		
		.mjs-nestedSortable-error {
			background: #fbe3e4;
			border-color: transparent;
		}
		
		#tree {
			width: 550px;
			margin: 0;
		}
		
		ol {
			max-width: 450px;
			padding-left: 25px;
		}
		
		ol.sortable,ol.sortable ol {
			list-style-type: none;
		}
		
		.sortable li div {
			border: 1px solid #d4d4d4;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			cursor: move;
			border-color: #D4D4D4 #D4D4D4 #BCBCBC;
			margin: 0;
			padding: 3px;
		}
		
		li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
			border-color: #999;
		}
		
		.disclose, .expandEditor {
			cursor: pointer;
			width: 20px;
			display: none;
		}
		
		.sortable li.mjs-nestedSortable-collapsed > ol {
			display: none;
		}
		
		.sortable li.mjs-nestedSortable-branch > div > .disclose {
			display: inline-block;
		}
		
		.sortable span.ui-icon {
			display: inline-block;
			margin: 0;
			padding: 0;
		}
		
		.menuDiv {
			background: #EBEBEB;
		}
		
		.menuEdit {
			background: #FFF;
		}
		
		.itemTitle {
			vertical-align: middle;
			cursor: pointer;
		}
		
		.deleteMenu {
			float: right;
			cursor: pointer;
		}
		
		h1 {
			font-size: 2em;
			margin-bottom: 0;
		}
		
		h2 {
			font-size:...

JavaScript

$().ready(function(){
			$('li.mjs-nestedSortable-leaf').on('click', function () {				
        		$(this).toggleClass('selected');
    		});
			var ns = $('ol.sortable').nestedSortable({
				forcePlaceholderSize: true,
				handle: 'div',
				helper:	function (e, item) {
		            console.log('parent-helper');
		            console.log(item);
		            if(!item.hasClass('selected'))
		               item.addClass('selected');
		            var elements = $('.selected').not('.ui-sortable-placeholder').clone();
		            var helper = $('<ul/>');
		            item.siblings('.selected').addClass('hidden');
		            return helper.append(elements);
					},
		        start: function (e, ui) {
            		var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
            		ui.item.data('items', elements);
        		},
		        receive: function (e, ui) {
		            ui.item.before(ui.item.data('items'));
		        },
		        stop: function (e, ui) {
		            ui.item.siblings('.selected').removeClass('hidden');
		            $('.selected').removeClass('selected');
		        },					
				items: 'li',
				opacity: .6,
				placeholder: 'placeholder',
				revert: 250,
				tabSize: 25,
				tolerance: 'pointer',
				toleranceElement: '> div',
				maxLevels: 4,
				isTree: true,
				expandOnHover: 700,
				startCollapsed: false,
				change: function(){
					console.log('Relocated item');
				}
			});
			
			$('.expandEditor').attr('title','Click to show/hide item editor');
			$('.disclose').attr('title','Click to show/hide children');
			$('.deleteMenu').attr('title', 'Click to delete item.');
		
			$('.disclose').on('click', function() {
				$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
				$(this).toggleClass('ui-icon-plusthick').toggleClass('ui-icon-minusthick');
			});
			
			$('.expandEditor, .itemTitle').click(function(){
				var id =...