I have a list of tasks, i want to be able to drag them around and get the sortOrder array to change to the new order, this is what I've come up with but it's not working right, sometimes i get the order, sometimes i don't.. for example if i drag the first element to second position it works, but if i drag to last position it's not... also if i drag up it usually wrong.. What am i doing wrong? or can this be done some other way? I need to keep track of previous/next id's because there can be other elements in the sortOrder that are not visible, so i need to add the dragged element before or after a visible element. Thanks
const sortOrder = ["7","x", "5","y", "55", "1"],
tasks = document.getElementById("tasks");
Sortable.create(tasks, {
scroll: true,
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px, speed of the scrolling
bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement
revertOnSpill: true,
group: 'shared',
animation: 0,
dataIdAttr: 'id',
ghostClass: 'task-ghost',
dragClass: 'task-drag',
onEnd: (evt) => {
// let newIndex;
console.log('previousElementSibling', evt.item.previousElementSibling);
console.log('nextElementSiblingElementSibling', evt.item.nextElementSiblingElementSibling);
console.log('oldIndex', evt.oldIndex);
console.log('newIndex', evt.newIndex);
let neighborIndex;
// drag up or down
if (evt.oldIndex < evt.newIndex) neighborIndex = sortOrder.indexOf(evt.item.previousElementSibling?.id || sortOrder[0]);
else neighborIndex = sortOrder.indexOf(evt.item.nextElementSibling?.id);
console.log("neighborIndex",neighborIndex);
// remove element from array
sortOrder.splice(sortOrder.indexOf(evt.item.id), 1);
// add element to specific position
sortOrder.splice(neighborIndex, 0, evt.item.id);
console.log(sortOrder);
}
}).tasks {
list-style-type: none;
}
li {
border: solid 1px red;
margin: 4px;
width: 200px;
}
.task-ghost{ opacity: 0; }
.task-drag{ opacity: 1;}<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<ul class="tasks" id="tasks">
<li id="7" class="task">element 7</li>
<li id="5" class="task">element 5</li>
<li id="55" class="task">element 55</li>
<li id="1" class="task">element 1</li>
</ul>I've managed to get good results, if someone has a better way please tell me.
const sortOrder = ["7", "x", "5", "y", "55", "1"],
tasks = document.getElementById("tasks");
Sortable.create(tasks, {
scroll: true,
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px, speed of the scrolling
bubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movement
revertOnSpill: true,
group: 'shared',
animation: 0,
dataIdAttr: 'id',
ghostClass: 'task-ghost',
dragClass: 'task-drag',
onEnd: (evt) => {
// let newIndex;
console.log('previousElementSibling', evt.item.previousElementSibling);
console.log('nextElementSiblingElementSibling', evt.item.nextElementSiblingElementSibling);
console.log('oldIndex', evt.oldIndex);
console.log('newIndex', evt.newIndex);
let neighborIndex;
sortOrder.splice(sortOrder.indexOf(evt.item.id), 1); // stergem pe ala pe care l-am tras de sus
if (evt.oldIndex < evt.newIndex) neighborIndex = sortOrder.indexOf(evt.item.previousElementSibling.id) + 1;
else neighborIndex = sortOrder.indexOf(evt.item.nextElementSibling.id);
sortOrder.splice(neighborIndex, 0, evt.item.id); // il adaugam dupa vecin
console.log(sortOrder);
}
}).tasks {
list-style-type: none;
}
li {
border: solid 1px red;
margin: 4px;
width: 200px;
}
.task-ghost {
opacity: 0;
}
.task-drag {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<ul class="tasks" id="tasks">
<li id="7" class="task">element 7</li>
<li id="5" class="task">element 5</li>
<li id="55" class="task">element 55</li>
<li id="1" class="task">element 1</li>
</ul>