控制vue可拖动中的嵌套级别答案

【问题标题】：Controlling nesting level in vue draggable控制vue可拖动中的嵌套级别
【发布时间】：2021-09-11 15:20:10
【问题描述】：

在：

https://codesandbox.io/s/djch5?file=/src/components/NestedDraggable.vue

嵌套通过指令（v-if）控制：

<template> 
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
    <li v-for="el in tasks" :key="el.name">
      <generic-item :taskItem="el"> </generic-item>
      <p>{{ el.name }}</p>
      <div v-if="el.type === 'inventoryCategory'">
        <nested-draggable :tasks="el.tasks" />
      </div>      
    </li>
  </draggable>
</template>

它作为递归停止在类别级别（一个部分包括一个类别和一个类别，没有或更多项目）。

问题是部分可以被拖到另一个部分。我怎样才能避免这种情况？（一个部分可能只包含项目）。

目前，类型推断是通过根据可能的值检查字段 ("type": "inventoryCategory") 并相应地呈现标签来完成的。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

想出了：

https://codesandbox.io/s/flbdx

（嵌套管理在：

https://codesandbox.io/s/heuristic-wright-6lhk6?file=/src/components/NestedDraggable.vue

checkMove: function (evt) {
  // no items outside a category
  if (itemElem.type === "inventoryItem") {
    if (evt.to.childNodes.length > 0) {
      var k = 0;
      for (var i = 0; i < evt.to.childNodes.length; ++i) {
        if (
          evt.to.childNodes[i].getAttribute("element-type") ===
          "inventoryCategory"
        ) {
          k++;
        }
      }
      if (k === evt.to.childNodes.length) {
        return false;
      }
    } else {
      return true;
    }
  }
  // No nested categories
  if (evt.from !== evt.to && itemElem.type === "inventoryCategory") {
    return false;
  }
  return true;
},

)

【讨论】：