这两个列表在 vue.draggable 中是通过哪个属性进行关联的?

huangapple go评论44阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年3月21日 01:40:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793556-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定