使用 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>

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

Access the data-id of both the element dragged and the element replaced using SortableJS

javascript

sortablejs