Vue可拖动-如何仅替换选择的项以防止移动网格上的所有其他项？

问题描述

这是一个测试示例： 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空间移动。所有其他物品应保留在其空间中。

我尝试使用 { "Name": "Alison Davison","birthday": new Date("1975-04-05"),"Address": "874 W. Oak Place","City": "Gary","State": "Indiana","Position": { "Name": "Customer Support","Remote": true,"Full Time": true } } 无效，并且如果没有sort=false，它将禁用所有拖动。

这可能吗？

我希望网格中的项目固定不变，仅根据所需的选择移动。如果我没有使用正确的工具，还有其他方法可以做到这一点吗？考虑一下网格是否为图标，将图标移至选区时，它确实可以提供良好的UI，然后所有先前的图标会自动移入。对用户来说会很烦。

希望这是有道理的，如果您需要更多详细信息，请在下面评论，我会根据需要进行修改/更新。

解决方法

虽然vuedraggable默认不提供交换功能https://github.com/SortableJS/Vue.Draggable/issues/466，但是有一个不错的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
    }
  }