vuedraggable问题记录

我使用的是vue2 + draggable2.4 在自己本地开发好好的，build 后出现这个错误：

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'on')"

提示我们某个属性是undefined，按照惯性认为是我插件使用的问题，但是官方demo也无法实现，又切了无数个版本，也无法解决！！！ 这个错误导致卡了两三天，可能其他人没有这个问题吧，搜索引擎没有出现结果，无法解决，头疼...

后来去打开安装包，对比文件也是没有发现差异，索性直接拿出来放自己components文件夹里面。

将多余的这三行注释，惊喜地发现错误瞬间无了。 是 components 注册时机不对。

结论：还得是自己去深挖打开代码研究

下面是一些使用经验
经过上面的componets修改，我就不用npm源的 vuedraggable 了， 按照依赖仅仅装了 sortablejs，这两个文件提取出来，作为自己工程里的局部注册组件使用：

1. 两个draggable组件可以使用不同的 v-model 互相拖动。
   ex:

 <draggable
    v-model="row.items[activeName].menus"
    :list="row.menus"
    tag="div"
    handle=".move"
    filter=".disabled"
    class="flex manage-wrap wrap justify-space-around"
    :group="groupB"
    @change="handleUpdate"
  >
   <el-col
      v-for="(menu,menuIndex) in row.items[activeName].menus"
      :key="menuIndex"
      :span="6"
    ></el-col>
</draggable>

2. 排除disabled无法拖动的原因后，再看看你的 dom 中是否有无关【静态】的 tag 。我的经验是：加入了无关tag会影响到正常拖拽。 以上代码案例中，el-col 不能出现同级tag。

3. 业务中需要用到奇怪的分类，不是按照我们draggable的分组， 而是el-tabs，这样也是可以实现的，思路：将el-tabs写在draggable上方，activeName变化后，更新menus的value。

  <el-tabs
    v-model="activeName"
    @tab-click="handleClick"
  >
    <el-tab-pane
      v-for="(item, index) of row.items"
      :key="index"
      :label="item.tabName"
    />
  </el-tabs>
  <draggable
    v-model="row.items[activeName].menus"
    :list="row.menus"
    tag="div"
    handle=".move"
    filter=".disabled"
    class="flex manage-wrap wrap justify-space-around"
    :group="groupB"
    @change="handleUpdate"
  >
    <el-col
      v-for="(menu,menuIndex) in row.items[activeName].menus"
      :key="menuIndex"
      :span="6"
    ></el-col>
</draggable>

4. 直接赋值页面无更新，disabled也需要在强更新之前处理好，添加这个强更新：

this.$forceUpdate()

end

问题就记录到这里，后期有遇到也会持续更新~