使用SortableJS访问拖动的元素和替换的元素的数据id

Question

我可以访问被拖动元素的id(请参阅下面的代码(，但不知道如何获取被替换元素的id。

JS:

Sortable.create(selection, {
handle: '.bars-move',
animation: 150,
onStart: function (/**Event*/evt) {
var itemEl = evt.item;
var data_id = itemEl.getAttribute("data-id");
},
});

有什么想法吗？

Answer 1

在onStart上保存当前id列表，在onEnd上使用evt.newIndex引用此列表。

var originalList;
var sortable = new Sortable(document.getElementById('items'), {
onStart: function(evt) {
originalList = [...document.querySelectorAll("#items > div")].map(el => el.id);
},
onEnd: function(evt) {
console.log("Dragged id: " + evt.item.id + 
" - Replaced id: " + originalList[evt.newIndex]);
}
});

.list-group-item { font-size: 10px; padding: 1px 5px!important; width: 150px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="items" class="list-group col">
<div id="item1" class="list-group-item">Item 1</div>
<div id="item2" class="list-group-item">Item 2</div>
<div id="item3" class="list-group-item">Item 3</div>
<div id="item4" class="list-group-item">Item 4</div>
<div id="item5" class="list-group-item">Item 5</div>
<div id="item6" class="list-group-item">Item 6</div>
</div>