JSFiddle - React, Tailwind, and code Playground

by Alexandr Loginov

HTML

<div class="container">
		<div id="multi" style="margin-left: 30px">
			<div><div data-force="5" class="layer title title_xl">Multi</div></div>

			<div class="layer tile" data-force="30">
				<div class="tile__name">Group A</div>
				<div class="tile__list">
					<img src="http://rubaxa.github.io/Sortable/st/face-01.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-02.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-03.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-04.jpg"/>
				</div>
			</div>

			<div class="layer tile" data-force="25">
				<div class="tile__name">Group B</div>
				<div class="tile__list">
					<img src="http://rubaxa.github.io/Sortable/st/face-05.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-06.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-07.jpg"/>
				</div>
			</div>

			<div class="layer tile" data-force="20">
				<div class="tile__name">Group C</div>
				<div class="tile__list">
					<img src="http://rubaxa.github.io/Sortable/st/face-08.jpg"/><!--
					--><img src="http://rubaxa.github.io/Sortable/st/face-09.jpg"/>
				</div>
			</div>

		</div>
	</div>

JavaScript

var container = document.getElementById("multi");
var sort = Sortable.create(container, {
  animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  handle: ".tile__title", // Restricts sort start click/touch to the specified element
  draggable: ".tile", // Specifies which items inside the element should be sortable
  onUpdate: function (evt/**Event*/){
     var item = evt.item; // the current dragged HTMLElement
  }
});