英文:
What property is linking these two lists in vue.draggable?
问题
以下是代码的翻译部分:
<template>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<rawDisplayer class="col-3" :value="list1" title="List 1" />
<rawDisplayer class="col-3" :value="list2" title="List 2" />
</div>
</template>
希望这能帮助你理解如何使这两个可拖放列表相互知晓。
英文:
<template>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<rawDisplayer class="col-3" :value="list1" title="List 1" />
<rawDisplayer class="col-3" :value="list2" title="List 2" />
</div>
</template>
<script>
import draggable from "@/vuedraggable";
export default {
name: "two-lists",
display: "Two Lists",
order: 1,
components: {
draggable
},
data() {
return {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
],
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
]
};
},
methods: {
add: function() {
this.list.push({ name: "Juan" });
},
replace: function() {
this.list = [{ name: "Edgard" }];
},
clone: function(el) {
return {
name: el.name + " cloned"
};
},
log: function(evt) {
window.console.log(evt);
}
}
};
</script>
This is straight from the draggable documentation found here on the "View Code" button:
https://sortablejs.github.io/Vue.Draggable/#/two-lists
I am trying to understand what property is necessary to make it so each list knows the other is a drag and drop area. Unfortunately this isn't clarified in the doc, so anyone who can break it down I'd be ever so grateful!
I think it has something to do with
<draggable class="list-group" :list="list1" group="people" @change="log">
but unsure
答案1
得分: 2
The vue-draggable
library是基于另一个名为Sortable的库构建的,如README中所述。因此,与可拖动选项相关的任何内容都来自该库,您应参考其文档。
这是group
属性的文档:
要从一个列表拖动元素到另一个列表,这两个列表必须具有相同的group值。您还可以定义列表是否能够让出、让出并保留一个副本(克隆)以及接收元素。
因此,是的,该属性是负责将两个可拖动列表连接起来的属性。
英文:
The vue-draggable
library is, as stated on the repo's README, based on another library called Sortable.
So anything related to the draggable options are from this library and you should refer to its documentation.
Here is the documentation for the group
property:
> To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.
So yes, this property is the one responsible to link two draggable lists.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论