可拖曳的物品到底在哪里移动？

问题描述

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

事件添加=> newIndex，元素。

事件已删除=> oldindex，元素。

它告诉我itemA在itemB中的索引，但是我知道在哪里呢？我错过了什么？：3

我发现很难在两页之间编写一个可在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",{
          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可以使用保存级别元素来计算其索引，不过，需要防止拖动到空列表中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue.js vuedraggable