可排序的js根据拖动的元素更改数组

Question

我有一个任务列表，我希望能够拖动它们并让 sortOrder 数组更改为新订单，这就是我想出的但它无法正常工作，有时我会得到订单，有时我不......例如，如果我将第一个元素拖到第二个位置它可以工作，但是如果我拖到最后一个位置它不是......如果我把它拖起来通常是错误的......我做错了什么？ 或者这可以通过其他方式完成吗？ 我需要跟踪上一个/下一个 id，因为 sortOrder 中可能有其他不可见的元素，因此我需要在可见元素之前或之后添加拖动的元素。 谢谢

 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>

Answer 1

我已经设法得到了很好的结果，如果有人有更好的方法请告诉我。

 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>