标签: multi-drag

问题

我正在使用SortableJS构建一个可拖动的树组件。这意味着我的每个sortable-items 都有 atoggle-arrow作为打开和关闭 a 的子元素sub-tree（如果有的话）。

我试图用它来阻止在单击时stopPropagation()选择父项，但它不起作用。sortable-itemtoggle-arrow

关闭时看起来像这样：

打开时看起来像这样：

您在打开状态下看到的蓝色突出显示（第二张图片）是我selectedClass在使用multiDrag插件时为选项选择的样式。

这说明当我单击它时，它会导致选择toggle-arrow父级。sortable-item

我不希望这种事发生。

代码

我的 SortableJS 树组件中的项目代码如下所示（使用 Vue.js 和 Pug 语法）：

div.sortable-item
    div.content
        div.toggle-arrow(@click.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

然后我有一个用于@click绑定我的toggle-arrow元素的处理程序：

toggleTree = function($event) {
    $event.stopPropagation()
    /// Code for handling the sub-tree toggling goes here.
    /// The sub-tree toggling itself works just fine.
}

您可以看到我声明@click.stop为事件绑定，这应该阻止click事件从子元素冒泡toggle-arrow，但它不起作用。 …

最近我发现SortableJS / Vue.Draggable库（https://github.com/SortableJS/Vue.Draggable）有一个新选项，可以启用多拖动以从数组中选择多个元素并将它们移动到一起（https://github.com/SortableJS/Vue.Draggable/pull/744）。

我看过它完美运行的示例，例如：

• https://jsfiddle.net/zr042g3j/3/
• https://codepen.io/Flip535/pen/jOOKBZj
• https://github.com/SortableJS/Vue.Draggable/pull/744

但是当我尝试在我的项目中使用它时，我只能找到使它工作的方法。

以下是我的项目的详细信息：

• 视图：2.6.10
• Vuedraggable : 2.23.2

在我的 vue 组件中，我以这种方式导入了 vuedraggable：

import draggable from 'vuedraggable'

我已经应用了这种方式（为了这篇文章的目的，代码已经减少了）：

<template>
  <v-flex class="pa-3">
    <div class="instructions-wrapper py-4">
      <v-avatar size="40" color="#4C2159" class="white--text"><b>4</b></v-avatar>
      <div class="px-2">
        <h2>Revisa y asigna</h2>
        <p>Revisa la optimización del sistema y asigna o personaliza una ruta</p>
      </div>
    </div>

    <template v-for="(vehicle, key) in sortedRoutes.routes">
      <v-card class="my-4" :key="vehicle.stops.location_id">
        <v-toolbar color="primary" dark>
          <v-toolbar-title>{{ Object.keys(sortedRoutes.routes).find(key => sortedRoutes.routes[key] === vehicle) }}</v-toolbar-title>
        </v-toolbar>

        <draggable
          :key="vehicle.stops.location_id"
          :list="vehicle.stops"
          :id="key" …