Question

我正在尝试按照可拖动的文档创建可拖动的列表，但是当我拖放项目时，另一项正在移动。例如，如果我将standard1拖到Term2列表中，则standard2最终出现在第二个列表中。这是怎么回事？

data(){
  return {
    terms: [
      {
        "id": 1,
        "label": "Term1",
        "term_standards": [
          {"id": 1, "label": "standard1"},
          {"id": 2, "label": "standard2"},
        ]
      },
      {
        "id": 2,
        "label": "Term2",
        "term_standards": [
          {"id": 3, "label": "standard3"},
          {"id": 4, "label": "standard4"},
        ]
      },
    ]
  }
}


<draggable
  v-model="terms[0].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
  :key="terms[0].id">
    {{ terms[0].label }}
  <li
    v-for="item in terms[0].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

<draggable
  v-model="terms[1].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
  :key="terms[1].id">
    {{ terms[1].label }}
  <li
    v-for="item in terms[1].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

Answer 1

呈现模板时，ul元素周围缺少li。

另外，{{ terms[0].label }和{{ terms[1].label }应该放在<draggable>元素之外。

您的模板应如下图所示

{{ terms[0].label }}
<draggable
  element="ul"
  v-model="terms[0].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
>
  <li
    v-for="item in terms[0].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

{{ terms[1].label }}
<draggable
  element="ul"
  v-model="terms[1].term_standards"
  class="dragArea"
  :options="{group:'ITEMS'}"
>
  <li
    v-for="item in terms[1].term_standards"
    :key="item.id">
      {{ item.label }}
  </li>
</draggable>

从数组中拖放不正确的项目

1 个答案: