JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.8.0/js/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"/>

		<div id="simple-list" class="row">
			<h4 class="col-12">Simple list example</h4>
			<div id="example1" class="list-group col">
				<div class="list-group-item">Item 1</div>
				<div class="list-group-item">Item 2</div>
				<div class="list-group-item">Item 3</div>
				<div class="list-group-item">Item 4</div>
				<div class="list-group-item">Item 5</div>
				<div class="list-group-item">Item 6</div>
			</div>

     <script> new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});</script>


		</div>

JavaScript

var example1 = document.getElementById('example1'),
	example2Left = document.getElementById('example2-left'),
	example2Right = document.getElementById('example2-right'),
	example3Left = document.getElementById('example3-left'),
	example3Right = document.getElementById('example3-right'),
	example4Left = document.getElementById('example4-left'),
	example4Right = document.getElementById('example4-right'),
	example5 = document.getElementById('example5'),
	example6 = document.getElementById('example6'),
	example7 = document.getElementById('example7'),
	gridDemo = document.getElementById('gridDemo'),
	multiDragDemo = document.getElementById('multiDragDemo'),
	swapDemo = document.getElementById('swapDemo');

// Example 1 - Simple list
new Sortable(example1, {
	animation: 150,
	ghostClass: 'blue-background-class'
});


// Example 2 - Shared lists
new Sortable(example2Left, {
	group: 'shared', // set both lists to same group
	animation: 150
});

new Sortable(example2Right, {
	group: 'shared',
	animation: 150
});

// Example 3 - Cloning
new Sortable(example3Left, {
	group: {
		name: 'shared',
		pull: 'clone' // To clone: set pull to 'clone'
	},
	animation: 150
});

new Sortable(example3Right, {
	group: {
		name: 'shared',
		pull: 'clone'
	},
	animation: 150
});


// Example 4 - No Sorting
new Sortable(example4Left, {
	group: {
		name: 'shared',
		pull: 'clone',
		put: false // Do not allow items to be put into this list
	},
	animation: 150,
	sort: false // To disable sorting: set sort to false
});

new Sortable(example4Right, {
	group: 'shared',
	animation: 150
});


// Example 5 - Handle
new Sortable(example5, {
    handle: '.handle', // handle class
    animation: 150
});

// Example 6 - Filter
new Sortable(example6, {
    filter: '.filtered',
    animation: 150
});

// Example 7 - Thresholds
var example7Sortable = new Sortable(example7, {
    animation: 150
});


var example7SwapThreshold = 1;
var example7SwapThresholdInput =...