JSFiddle - React, Tailwind, and code Playground

by Marcel P S

HTML

<script src="https://rawgit.com/ilikenwf/nestedSortable/2.0alpha/jquery.mjs.nestedSortable.js"></script>
<ol class="sortable">
		<li id="list_1"><div><span class="disclose"><span></span></span>Item 1<span title="Click to delete item." data-id="1" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
			<ol>
				<li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1<span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
					<ol>
						<li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2<span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
					</ol>
			</ol>
		<li id="list_4"><div><span class="disclose"><span></span></span>Item 2<span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
		<li id="list_5"><div><span class="disclose"><span></span></span>Item 3<span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
			<ol>
				<li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)<span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
				<li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2<span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
					<ol>
						<li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1<span title="Click to delete item." data-id="8" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
					</ol>
			</ol>
		<li id="list_9"><div><span class="disclose"><span></span></span>Item 4<span title="Click to delete item." data-id="9" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
		<li id="list_10"><div><span...

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.sortable {
  margin: 4em 0;
}

.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 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',...

JavaScript

$(document).ready(function(){
	
	$('ol.sortable').nestedSortable({
		forcePlaceholderSize: true,
		handle: 'div',
		helper:	'clone',
		items: 'li',
		opacity: .6,
		placeholder: 'placeholder',
		revert: 250,
		tabSize: 25,
		tolerance: 'pointer',
		toleranceElement: '> div',
		maxLevels: 3,
		isTree: true,
		expandOnHover: 700,
		startCollapsed: true,
		stop: function(event, ui) {
			
			var id = $(ui.item).attr('id');
			var res = id.substr(5);
			
			if($('#list_'+res).find('ol').length != 0) {
				$('#list_'+res).parent('span.file_upload').remove();
				console.log(this);
			} else {
				if ($('#list_'+res).parent().is('ol.sortable')) {
					$('#list_'+res).find('span.file_upload').remove();
				} else {
					if ($('#list_'+res).find('span.file_upload').length == 0) {
						$('#list_'+res).append(
							'<span class="file_upload" title="Click to upload a file." id="res" class="deleteMenu">'
							+ '<input name="upload_file" type="file" class="new_file" />'
							+ '</span>');
					}
				}
			}
		}
		
	});
	
	$('.disclose').on('click', function() {
		$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
	});
	
	$('.deleteMenu').click(function(){
		var id = $(this).attr('data-id');
		$('#list_'+id).remove();
	});
	
});