使用 SortableJS 访问拖动的元素和替换的元素的 data-id答案

【问题标题】：Access the data-id of both the element dragged and the element replaced using SortableJS使用 SortableJS 访问拖动的元素和替换的元素的 data-id
【发布时间】：2020-04-11 10:06:56
【问题描述】：

我可以访问被拖动元素的 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");
    },
});

有什么想法吗？

【问题讨论】：

标签： javascript sortablejs

【解决方案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>

【讨论】：

嗨，爱丽儿，感谢您的回答！我尝试使用 onEnd 打印 data_id 属性，但没有得到预期的行为（仅打印拖动元素的 data-id 属性）。您将如何打印拖动项和替换项的 data-id 属性？
更新答案，请告诉我这是否是您要找的内容