下面是一个测试示例: 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=
,它会禁用所有拖动。
这可能吗?
我希望网格中的项目是静止的,并且只根据所需的选择移动。如果我没有使用正确的工具,是否还有其他方法可以完成此任务?想想如果网格是图标,当将图标移动到一个选择时它确实是一个很好的 UI,然后所有以前的图标都会自动移动。对用户来说会很烦人。
希望这是有道理的,如果您需要更多详细信息,请在下方评论,我会根据需要进行修改/更新。
最佳答案
虽然 vuedraggable 默认不提供交换 https://github.com/SortableJS/Vue.Draggable/issues/466 , 有一个很棒的 article这说明了如何自己实现它。
这是您修改后的代码沙箱 https://codesandbox.io/s/vuedraggable-with-css-grid-forked-wk4xk
基本上,您需要通过存储当前和 future 的索引来自己实现交换行为(注意,我将您的列表名称更改为“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
}
}
关于javascript - Vue Draggable - 如何只替换选择的项目以防止移动网格上的所有其他项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63433028/