1

我在拖动时使用嵌套的可拖动和监听事件，然后发现如果我将 itemA 拖到 itemB 中，事件会抛出：

事件添加 => newIndex，元素。

删除事件 => oldIndex，元素。

它告诉我 itemA 在 itemB 中的索引，但我知道谁是 itemB。我错过了什么？:3

我发现很难在 2 个页面之间编写一个可拖动的 vue 嵌套组件，我在你自己的计算机上放了一个简单的代码来查看它（不是我的，复制官方文档，几乎没有变化）。下面的代码

<template>
  <div class="row">
    <div class="col-8">
      <h3>Nested draggable</h3>
      <nested-draggable :tasks="list" />
    </div>
  </div>
</template>

<script>
import nestedDraggable from "./infra/nested";
export default {
  name: "nested-example",
  display: "Nested",
  order: 15,
  components: {
    nestedDraggable
  },
  data() {
    return {
      list: [
        {
          name: "task 1",
          tasks: [
            {
              name: "task 2",
              tasks: []
            }
          ]
        },
        {
          name: "task 3",
          tasks: [
            {
              name: "task 4",
              tasks: []
            }
          ]
        },
        {
          name: "task 5",
          tasks: []
        }
      ]
    };
  }
};
</script>
<style scoped></style>

和基础设施/嵌套

<template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }" @change="changed">
    <li v-for="el in tasks" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable :tasks="el.tasks" />
    </li>
  </draggable>
</template>
<script>
import draggable from "@/vuedraggable";
export default {
  props: {
    tasks: {
      required: true,
      type: Array
    }
  },
  components: {
    draggable
  },
  name: "nested-draggable",
  methods: {
    changed (event) {
      console.log(event)
    }
  }
};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>

到目前为止，传递一个 el.list 可以计算它的索引与保存级别元素，但是，需要防止拖入一个空列表。

4

0 回答 0