Vue Draggable - 如何只替换选择的项目以防止移动网格上的所有其他项目？

Question

这是一个测试示例： https://codesandbox.io/s/j4vn761455?file=/src/App.vue:112-116

第1步：将4拖到5，如你所见，4和5互换位置

第 2 步：将 1 拖到 6，如您所见，1 到 6 的位置，6 被推到一边，2、3、4 和 5 全部转移过来。

我希望保持现有项目不变，移动 1 和 6 应该在网格上移动 1 到 6 和 6 到 1 space。所有其他项目应保留在其 space 中。

我试过使用 sort=false 这没有效果，没有 group=，它会禁用所有拖动。

这可能吗？

我希望网格中的项目是固定的，并且只根据所需的选择移动。如果我没有使用正确的工具，是否还有其他方法可以完成此任务？想想如果网格是图标，当将图标移动到一个选择时它确实很好 UI 然后所有以前的图标自动移动。对用户来说会很烦人。

希望这是有道理的，如果您需要更多详细信息，请在下方评论，我会根据需要revise/update。

Answer 1

虽然 vuedraggable 默认不提供交换 https://github.com/SortableJS/Vue.Draggable/issues/466 , there's a great article 解释了如何自己实现它。

这是您修改后的代码沙箱https://codesandbox.io/s/vuedraggable-with-css-grid-forked-wk4xk

基本上，您需要通过存储当前和未来的索引来自己实现交换行为（注意，我将您的列表名称更改为“items”只是为了更容易移植文章中的代码）。

<draggable v-model="items" :move="handleMove" @end="handleDragEnd">

在你的脚本中

methods: {
    handleDragEnd() {
      this.futureItem = this.items[this.futureIndex];
      this.movingItem = this.items[this.movingIndex];
      const _items = Object.assign([], this.items);
      _items[this.futureIndex] = this.movingItem;
      _items[this.movingIndex] = this.futureItem;

      this.items = _items;
    },
    handleMove(e) {
      const { index, futureIndex } = e.draggedContext;
      this.movingIndex = index;
      this.futureIndex = futureIndex;
      return false; // disable sort
    }
  }

Vue Draggable - 如何只替换选择的项目以防止移动网格上的所有其他项目？

Vue Draggable - How to only replace item chosen to prevent shifting all other items on grid?

javascript

vue.js

vuedraggable