JQuery UI sortable - sort by drop event only
I want to disable sorting of items while dragging an item. Only after completion of the drop should the items be sorted accordingly.
$( "#sortable" ).sortable({
tolerance: 'pointer',
revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'parent',
cursor: 'move',
distance: 5,
opacity: 0.3,
});
+3
source to share
1 answer
One way to do this is to indicate the location of the microloan during various events. This is causing the return issue, but there is probably a way to resolve this somehow. And the behavior might not be exactly the same, but again, a little tweak and it might be there. Anyway, my suggestion:
$(function () {
$("#sortable").sortable({
tolerance: 'pointer',
//revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'window',
cursor: 'move',
distance: 5,
opacity: 1,
start: function (event, ui) {
place_prev = ui.placeholder.prev();//get position when selecting item
},
change: function (event, ui) {
place_pos = ui.placeholder.index(); //each change you gather where the placeholder is going
place_prev.after(ui.placeholder);//then you place it back where it started
},
beforeStop: function (event, ui) {
$('li').eq(place_pos).after(ui.item);//before stopping you place item where it was on last change event
},
});
});
+2
source to share