Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs.
Here is an example of the DOM structure:
<div class="sequence_boxes sortable sortable_area ui-sortable">
<div class="box" data-index="0">..</div>
<div class="box" data-index="1">..</div>
<div class="box" data-index="2">..</div>
<div class="box" data-index="3">..</div>
</div>
Below is the jQuery code snippet:
$('.sequencing').append('<div class="sequence_boxes sortable sortable_area"></div>');
$('.sequence_option').each(function (i) {
$('<div class="box"></div>').appendTo($('.sequence_boxes')).append(this);
$(this).attr("data-index", i);
$(this).parent().attr('data-index', i);
});
$('.sequence_boxes').each(function () {
// get current div
var $div_parent = $(this);
// get array of childs in parent div
var $divsArr = $div_parent.children('.box');
// sort array of childs in parent div (#sponsors) randomly
$divsArr.sort(function (a, b) {
// Get a random number between 0 and 10
var temp = parseInt(Math.random() * 10);
// Get 1 or 0, whether temp is odd or even
var isOddOrEven = temp % 2;
// Get +1 or -1, whether temp greater or smaller than 5
var isPosOrNeg = temp > 5 ? 1 : -1;
// Return -1, 0, or +1
return (isOddOrEven * isPosOrNeg);
})
// append child items to parent
.appendTo($div_parent);
});
$('.sortable_area').sortable({
dropOnEmpty: true,
forcePlaceholderSize: true,
forceHelperSize: false,
connectWith: ".sequence_boxes",
scrollSensitivity: 200,
scrollSpeed: 40,
placeholder: "ui-sortable-placeholder",
cursor: "move",
distance: 0.5,
delay: 100,
opacity: 0.6,
tolerance: "pointer",
}).disableSelection();