JSFiddle - React, Tailwind, and code Playground

by frncsdrk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.min.js"></script>
<div id="c1" class="container">
  <div class="elem">Option1</div>
  <div class="elem">Option2</div>
  <div class="elem">Option3</div>
  <div class="elem">Option4</div>
  <div class="elem">Option5</div>
  <div class="elem">Option6</div>
</div>
<div id="c2" class="container"></div>

CSS

.container {
  border: 1px solid #000;
}
.elem {
  border: 1px solid red;
}

JavaScript

var elems = [];

dragula([$("#c1").get(0)])
.on("dragend", function(el, target, src) {
	elems = []; // reset elems
	$(".elem").each(function(idx, elem) {
  	elems.push($(elem).text());
  });
  
  console.log(elems);
  
  // validate elems are in correct order
});