英文:
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>
<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>
关于您的疑问，确实，与两个可拖放列表相互关联的关键部分在于以下代码片段：
<draggable class="list-group" :list="list1" group="people" @change="log">
这里的 group="people" 是用来将两个可拖放列表关联在一起的关键属性。两个列表都必须有相同的 group 值，以使它们互相识别为拖放区域。在这个示例中，两个列表都使用 group="people"，因此它们知道彼此是可拖放区域。
英文:
<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基于README库上所述的另一个名为Sortable的库。
所以与可拖拽选项相关的任何内容都来自这个库，您应该参考其文档。
这是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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论