JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

JavaScript

var NestedSortables = new Class({

	Implements: [Options, Events],
	
	options: {
		childTag: 'li',
		ghost: true,
		childStep: 20, // attempts to become a child if the mouse is moved this number of pixels right
		handleClass: null, 
		onStart: Class.empty,
		onComplete: Class.empty,
		collapse: false, // true/false
		collapseClass: 'nCollapse', // Class added to collapsed items
		expandKey: 'shift', // control | shift
		lock: null, // parent || depth || class
		lockClass: 'unlocked'
	},
	
	initialize: function(list, options){
	
		this.setOptions(options);
	
		if (!this.options.expandKey.match(/^(control|shift)$/)){
			this.options.expandKey = 'shift';
		}
	
		this.list = document.id(list);
	
		this.options.childTag = this.options.childTag.toLowerCase();
		this.options.parentTag = this.list.get('tag').toLowerCase();
	
		this.bound = {};
		this.bound.start = this.start.bind(this);
	
		this.list.addEvent('mousedown', this.bound.start);
	
		if (this.options.collapse){
			this.bound.collapse = this.collapse.bind(this);
			this.list.addEvent('click', this.bound.collapse);
		}
	
		this.fireEvent('initialized', this);
		
	},

	start: function(event){
		
		var el = document.id(event.target);
	
		if (this.options.handleClass){
			while (el.get('tag').toLowerCase() != this.options.childTag && !el.hasClass(this.options.handleClass) && el != this.list){
				el = el.getParent();
			}
			if (!el.hasClass(this.options.handleClass)) return true;
		} 
		
		while (el.get('tag').toLowerCase() != this.options.childTag && el != this.list){
			el = el.parentNode;
		}

		// bugs out here		
		if (el.get('tag').toLowerCase() != this.options.childTag) return true;
		
		el = document.id(el);
		
		if (this.options.lock == 'class' && !el.hasClass(this.options.lockClass)) return;
		
		if (this.options.ghost){ // Create the ghost
			this.ghost = el.clone()
			.setStyles({
				'list-style-type': 'none',
				'opacity': 0.5,
				'position': 'absolute',
				'visibility': 'hidden',
				'top':...