- 首页
- 前端开发
- VueDraggable - 我们如何能够从两个不同的参数切换项目?
VueDraggable - 我们如何能够从两个不同的参数切换项目?
[英] VueDraggable - how can we be able to switch items from two different parameters?
本文介绍了VueDraggable - 我们如何能够从两个不同的参数切换项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
[这将是对这个问题的更新][1] 因为我们有同样的问题，但我的我希望能够从两个不同的参数切换项目.目前我只能从 1 个参数打开项目.我需要您通过修改此代码来帮助它，以便它能够从不同的参数切换项目.我试过修改这个 5 小时，但没有运气.提前致谢.
<div id="应用程序"><!-- item1 --><div><draggable v-model=item1":move="handleMove";@end="handleDragEnd"><transition-group tag="div";类=网格"名称=网格"><div class="cell"v-for=item1中的item"；:key=item">{{ item }}
</transition-group></可拖动>
<!-- item2 --><div><draggable v-model=item2":move="handleMove";@end="handleDragEnd"><transition-group tag="div";类=网格"名称=网格"><div class="cell"v-for=项目 2 中的项目"；:key=item">{{ item }}
</transition-group></可拖动>
</模板><脚本>从vuedraggable"导入可拖动；导出默认{名称:应用程序"，成分: {可拖动，},数据() {返回 {item1: [1, 2, 3, 4, 5, 6, 7, 8, 9],item2:[A"、B"、C"、D"、E"、F"、G"、H"、I"]、};},方法: {handleDragEnd() {this.futureItem = this.item1[this.futureIndex];this.movingItem = this.item1[this.movingIndex];const _items = Object.assign([], this.item1);_items[this.futureIndex] = this.movingItem;_items[this.movingIndex] = this.futureItem;this.item1 = _items;},处理移动(e){const { index, futureIndex } = e.draggedContext;this.movingIndex = 索引；this.futureIndex = futureIndex;返回假；//禁用排序},},};
转自:@Alberto Rivera 对此代码的回答 ->[1]:Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?
解决方案
例如.如果您在 this.item1 上选择了一个项目，则创建一个条件，如果它存在于另一个数组中.如果没有，那么它应该将其移动到 this.item2.
[This will be an update to this question][1] since we have the same problem but mine I want to be able to switch items from two different parameters. Currently I can only be able to switch items on from 1 parameter. I need your help by modifying this code so that it can be able to switch item from different parameter. I have tried modifying this for 5 hour but no luck. Thanks in advance.
<template>
<div id="app">
<!-- item1 -->
<div>
<draggable v-model="item1" :move="handleMove" @end="handleDragEnd">
<transition-group tag="div" class="grid" name="grid">
<div class="cell" v-for="item in item1" :key="item">{{ item }}</div>
</transition-group>
</draggable>
</div>
<!-- item2 -->
<div>
<draggable v-model="item2" :move="handleMove" @end="handleDragEnd">
<transition-group tag="div" class="grid" name="grid">
<div class="cell" v-for="item in item2" :key="item">{{ item }}</div>
</transition-group>
</draggable>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "App",
components: {
draggable,
},
data() {
return {
item1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
item2: ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
};
},
methods: {
handleDragEnd() {
this.futureItem = this.item1[this.futureIndex];
this.movingItem = this.item1[this.movingIndex];
const _items = Object.assign([], this.item1);
_items[this.futureIndex] = this.movingItem;
_items[this.movingIndex] = this.futureItem;
this.item1 = _items;
},
handleMove(e) {
const { index, futureIndex } = e.draggedContext;
this.movingIndex = index;
this.futureIndex = futureIndex;
return false; // disable sort
},
},
};
</script>
cedits to: @Alberto Rivera for this code answerd on this question ->
[1]: Vue Draggable - How to only replace item chosen to prevent shifting all other items on grid?
解决方案
For Example.
If you selected an item on this.item1 create a condition if it exist on the other array. If it doesn't then it should be moving it to this.item2.
这篇关于VueDraggable - 我们如何能够从两个不同的参数切换项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
