代码之家 › 专栏 › 技术社区 › tmarois

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

vuedraggable vue.js javascript

0

tmarois · 技术社区 · 6 年前

下面是一个要测试的示例: 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的空间。所有其他项目应保留在其空间内。

我试过使用 sort=false 这没有任何效果,也没有 group= ,则禁用所有拖动。

我希望网格中的项目是固定的,并且仅根据所需的选择移动。如果我没有使用正确的工具,还有什么可以做到这一点吗?试想一下,如果网格是图标,那么当将图标移动到选定区域时,它确实是一个很好的用户界面,然后之前的所有图标都会自动切换。对用户来说会很烦人。

1 回复 | 直到 6 年前

1

4

Alberto Rivera 6 年前

默认情况下,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
    }
  }