Question

我现在使用vue.js大约一个月，并希望使用vue-grid-layout构建网格8x4。是否有可能互相交换小部件，或者只能将它放在两者之间并将其推到底部？

将c拖到：

的示例

a  b  c  d
gets
c  b     d
a

但我想要达到的目标是：

a  b  c  d
gets
c  b  a  d

实施此类行为的最佳方式是什么？我是否必须使用不同的网格引擎？如果是的话，你更喜欢哪一个？

提前谢谢派蒂

Answer 1

为了达到这个效果，你将不得不在几个组件上编排好几个事件，并在发生事件时从孩子们向父母发出信号。

我们在此操作中涉及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)">

如果您发现目标索引未正确设置，则可能需要将@ dragenter.prevent替换为@ dragover.prevent。

这应该有用 - 欢迎提出意见。你需要撇下另一个孩子，而不是他们之间。

vue.js vue-grid-layout通过拖放交换小部件

1 个答案: