JSFiddle - React, Tailwind, and code Playground

Keep helper structure

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://sortablejs.github.io/Sortable/st/theme.css">
<link rel="stylesheet" type="text/css" href="https://sortablejs.github.io/Sortable/st/carbon.css">


      <div id="nestedDemo" class="list-group col nested-sortable">
				<div class="list-group-item nested-1">Slider
					<div class="list-group nested-sortable keep-structure">
						<div class="list-group-item nested-2 no-sorting">Slides
							<div class="list-group nested-sortable">
								<div class="list-group-item nested-3">Image 1.1</div>
								<div class="list-group-item nested-3">Image 1.2</div>
								<div class="list-group-item nested-3">Image 1.3</div>
								<div class="list-group-item nested-3">Image 1.4</div>
							</div>
						</div>
						<div class="list-group-item nested-2 no-sorting">Footer
							<div class="list-group nested-sortable">
								<div class="list-group-item nested-3">Image 2.1</div>
								<div class="list-group-item nested-3">Image 2.2</div>
								<div class="list-group-item nested-3">Image 2.3</div>
								<div class="list-group-item nested-3">Image 2.4</div>
							</div>
						</div>
					</div>
				</div>
				<div class="list-group-item nested-1">Container
          <div class="list-group nested-sortable">
						<div class="list-group-item nested-2">Image 3.1</div>
						<div class="list-group-item nested-2">Image 3.2</div>
						<div class="list-group-item nested-2">Image 3.3</div>
						<div class="list-group-item...

JavaScript

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
	new Sortable(nestedSortables[i], {
		group: {
	    name: 'nested',
      put: !nestedSortables[i].classList.contains('keep-structure')
    },
    filter: '.no-sorting',
		animation: 150,
		fallbackOnBody: true,
		swapThreshold: 0.65
	});
}