知道哪个 div 是 Sortable.js 的目标

Question

在 10 个 li 元素的列表中，我通过 Sortable.js 对列表进行排序。但我需要拖放 li 的项目的 id。我怎么会得到它？

Answer 1

我正在使用 SortableJs 对同一类别列表中的项目进行排序，但也能够将项目从一个类别列表移动到另一个类别列表，反之亦然。

不确定这是否是您要查找的内容，但这是我获取目标容器（列表）ID 的方式。

• event.oldIndex 是项目的原始位置。
• event.from 是项目的原始容器元素（例如ul 标签）
• event.newIndex 是项目的最终位置。
• event.to 是项目的最终容器元素（例如ul 标签）

也就是说你可以做这样的事情：

/* If position did not change neither the containing list */
if (event.oldIndex === event.newIndex && event.from === event.to) { return; }

/* If position changed within the same category */
if (event.oldIndex !== event.newIndex) {
  const newPosition = event.newIndex
}

/* If product was moved to another category list */
if (event.from !== event.to) {
  /* Accessing `<ul data-id="10">` */
  const categoryId = event.to.dataset.id;
  /* Accessing `<ul id="list_on_the_right_11">` */
  const elementId = event.to.id;
}

希望它能在某些方面有所帮助。