JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div data-sortable="link/to/src">
<div data-id="1">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
</div>
CSS
[data-id] {
border:1px solid #000;
margin:0 0 10px;
padding:10px;
}
JavaScript
$(document).ready(function () {
var container = $('[data-sortable]');
container.sortable({
items : "> [data-id]",
update : function() {
var postData = container.sortable('serialize', {
attribute: 'data-id'
});
alert(postData);
var postData2 = container.sortable('toArray', {
attribute: 'data-id'
});
alert(postData2);
}
});
});
/* end file */