将新项目从另一个项目拖入列表时，将页脚放在列表最后答案

【问题标题】：keep footer last in list when dragging new item into the list from another将新项目从另一个项目拖入列表时，将页脚放在列表最后
【发布时间】：2022-12-01 10:18:14
【问题描述】：

我让 Vue Draggable 像多列的看板一样工作，并且我让每列至少达到视口的高度，这样每个项目都可以很容易地拖到它旁边的列中（对于一列比它长得多的情况）下一个，例如）。

我在页脚槽中也有一个按钮，用于将新卡片添加到列中。这很好用，因为它通常总是在列表的底部，不可拖动等。

当我从另一个列表中拖动项目时出现问题以下页脚（但仍在可拖动元素的高度内）。当我这样做时，页脚不会停留在新项目下方，这看起来很奇怪。

一旦我放下该元素，它就会卡入到位并且页脚再次出现在底部 - 只有在移动新卡片时它才会出现在页脚下方。

有什么方法可以确保即使在移动事件期间和将新卡添加到列表中时，页脚仍保持为最后一个元素？

这个问题似乎在关于 Github 问题的评论中被捕获 - https://github.com/SortableJS/Vue.Draggable/issues/673#issuecomment-554149705 - 但该线程中没有提供解决方案。

非常感谢任何帮助。

【问题讨论】：

标签： vuedraggable

【解决方案1】：

因此，对于遇到相同问题的任何人，我通过执行以下操作解决了这个问题：

使用 :move 属性连接到 onMove 事件，以便在每次移动项目时运行一个函数...例如:move="fixFooter"
创建一个函数来检查移动的项目是否是新列表中的最后一个（因此默认情况下它会位于页脚下方而不进行此修复），如果是这样，$nextTick 将页脚附加到 Draggable 容器所以它被移动到进入列表的项目下方......（刚刚了解到.appendChild会将现有元素移动到末尾）

然后检查从/到列表是否相同以说明被拖动的项目背部在同一拖动事件期间将其放入列表中（否则，如果将项目从列表中拖出并返回到页脚下方而不将其放下，则会出现与以前相同的不良页脚行为）。

fixFooter(e) {
  if(e.relatedContext.list.length === e.draggedContext.futureIndex) {
    var newListDom = e.relatedContext.component.$el;
    var newListFooter = e.relatedContext.component.$slots.footer[0].elm;
    this.$nextTick(() => {
      newListDom.appendChild(newListFooter);
    });
  } else if(e.from === e.to && (e.from.children.length - 1) === e.draggedContext.futureIndex) {
    var currentListDom = e.from;
    var currentListFooter = e.from.lastChild;
    this.$nextTick(() => {
      currentListDom.appendChild(currentListFooter);
    });
  }
}

【讨论】：

【解决方案2】：

似乎对于 vue draggable next 这就足够了：

fixFooter(e) {
  if (e.relatedContext.list.length === e.draggedContext.futureIndex) {
    var newListDom = e.to

    var newListFooter = e.to.lastChild
    this.$nextTick(() => {
      newListDom.appendChild(newListFooter);
    });
  }
}

【讨论】：