JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<ul class="sTree2 listsClass" id="sTree2">
				<li id="item_a" data-module="a">
					<div>Item a</div>
				</li>
				<li class="sortableListsOpen" id="item_b" data-module="b">
					<div>Item b</div>
					<ul class="">
						<li id="item_b1" data-module="b">
							<div>Item b1</div>
						</li>
						<li id="item_b2" data-module="b">
							<div><span class="clickable">Item b2 - clickable text</span></div>
						</li>
						<li id="item_b3" data-module="b">
							<div>Item b3</div>
						</li>
						<li id="item_b4" data-module="b">
							<div>Item b4</div>
						</li>
						<li id="item_b5" data-module="b">
							<div>Item b5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_c" data-module="c">
					<div>Item c - c block disallows inserting items from other blocks</div>
					<ul class="">
						<li id="item_c1" data-module="c">
							<div>Item c1</div>
						</li>
						<li id="item_c2" data-module="c">
							<div>Item c2</div>
						</li>
						<li id="item_c3" data-module="c">
							<div>Item c3</div>
						</li>
						<li id="item_c4" data-module="c">
							<div>Item c4</div>
						</li>
						<li id="item_c5" data-module="c">
							<div>Item c5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_d" data-module="d">
					<div>Item d</div>
					<ul class="">
						<li id="item_d1" data-module="d">
							<div>Item d1</div>
						</li>
						<li id="item_d2" data-module="d">
							<div>Item d2</div>
						</li>
						<li id="item_d3" data-module="d">
							<div>Item d3</div>
						</li>
						<li id="item_d4" data-module="d">
							<div>Item d4</div>
						</li>
						<li id="item_d5" data-module="d">
							<div>Item d5</div>
						</li>
					</ul>
				</li>
				<li class="" id="item_e" data-module="e">
					<div>Item e</div>
				</li>
				<li class="" id="item_f" data-module="f">
					<div>Item f</div>
				</li>
			</ul>

JavaScript

$('.sortableLists').sortableLists( options );