我现在使用 vue.js 大约一个月了，想使用 vue-grid-layout 构建一个 8x4 的网格。是否有可能相互交换小部件，还是只能将它放在中间并推到底部？
将 c 拖到 a 的示例：
a b c d
gets
c b d
a
但我想要实现的是：
a b c d
gets
c b a d
实现这种行为的最佳方式是什么？ 我必须使用不同的网格引擎吗？ 如果是的话，你更喜欢哪一个？
提前谢谢 佩迪
【问题讨论】：
标签： vue.js drag-and-drop grid resize
为了达到这种效果，您将不得不在多个组件上编排多个事件，并在发生某些事情时从子级向父级发出信号。
我们有 2 个组件参与此操作 - 父组件和可拖动的子组件（具有多个实例）。在父母模板中，我们有以下...
<div id="dropTargetDiv" @drop.prevent="drop" v-on:startIndex="setStartIndex(value)" v-on:targetIndex="setTargetIndex(value)">
<draggable-component v-for="(itemData, index) in dataArray" :itemData="itemData" index="index"/>
</div>
父级也有这些方法...
setStartIndex(value) {
this.startIndex = value;
},
setTargetIndex(value) {
this.targetIndex = value;
},
drop(event) {
this.swapElements(this.startIndex, this.targetIndex);
},
swapElements(start, target) {
// Clone the original array
var newArray = JSON.parse(JSON.stringify(this.dataArray));
// Swap elements
var startElement = newArray[start];
var targetElement = newArray[target];
newArray[target] = startElement;
newArray[start] = targetElement;
// Update the UI
this.dataArray = newArray;
}
在子组件中，在其根元素上，我们有以下...
<div class="draggableItem" draggable="true" @dragstart="$emit('startIndex', this.index)" @dragenter.prevent="$emit('targetIndex', this.index)">
如果您发现目标索引设置不正确，您可能需要将 @dragover.prevent 替换为 @dragover.prevent。
这应该可行 - 欢迎使用 cmets。您需要趴在另一个孩子身上，而不是在他们之间。
【讨论】：