SortableJS / Vue.Draggable 多拖动选项不起作用

Question

最近我发现 SortableJS / Vue.Draggable 库 (https://github.com/SortableJS/Vue.Draggable) has a new option where multi-drag can be enabled to select multiple elements from an array and move them together (https://github.com/SortableJS/Vue.Draggable/pull/744).

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

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

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

Vue: 2.6.10
Vuedraggable: 2.23.2

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

import draggable from 'vuedraggable'

我已经采用这种方式（为此 post 目的减少了代码）：

<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"
          group="vehicle"
          animation="150"
          :multi-drag="true"
          selected-class="multi-drag"
          ghost-class="ghost"
          :move="moveChecker"
          @start="dragStart"
          @end="dragEnd"
        >
          <div v-for="(delivery, index) in vehicle.stops" :key="delivery.id" class="draggable-element">
            <v-list v-if="delivery.location_name !== 'CEDIS'" :key="delivery.title">
              <v-list-tile>
                <v-icon>drag_indicator</v-icon>
                <v-list-tile-avatar>
                  <img :src="`https://ui-avatars.com/api/?color=fff&background=4C2159&size=128&name=${index}`">
                </v-list-tile-avatar>

                <v-list-tile-content>
                  <div>{{delivery.location_name}} {{deliveries.find(key => key.location.company_name === delivery.location_name).start_time_window ? `(${deliveries.find(key => key.location.company_name === delivery.location_name).start_time_window} - ${deliveries.find(key => key.location.company_name === delivery.location_name).end_time_window})` : ''}}
                  </div>
                </v-list-tile-content>
              </v-list-tile>
            </v-list>
          </div>
        </draggable>
      </v-card>
    </template>
  </v-flex>
</template>

我已经注意通过 SortableJS / Vue.Draggable 文档添加使用多拖动选项所需的 select-class 属性。

作为可拖动列表打印的对象在这个JSON结构下：

{
  "routes": {
    "vehicle_1": {
      "stops": [
        {
          "stop_id": 0,
          "order_id": 1,
          "location_id": "DEPOT",
          "location_name": "Centro de distribución",
          "lat": -100,
          "lng": 100,
          "arrival_time": "08:00",
          "departure_time": "16:00"
        },
        {
          "stop_id": 1,
          "order_id": 2,
          "location_id": "order_2",
          "location_name": "Foo Zaas",
          "lat": -100,
          "lng": 100,
          "arrival_time": "10:00",
          "departure_time": "10:15"
        }
      ],
      "cost_matrix": [
        [
          {
            "distance_in_meters": 10,
            "travel_time_in_minutes": 10
          },
          {
            "distance_in_meters": 100,
            "travel_time_in_minutes": 100
          }
        ],
        [
          {
            "distance_in_meters": 10,
            "travel_time_in_minutes": 10
          },
          {
            "distance_in_meters": 100,
            "travel_time_in_minutes": 100
          }
        ]
      ],
      "summary": {
        "depot_name": "DEPOT",
        "demand_assigned": 234,
        "distance_in_meters": 3004,
        "travel_time_in_minutes": 157,
        "waiting_time_in_minutes": 70.1
      }
    }
  }
}

尽管付出了所有这些努力，我还是无法让它发挥作用。我什至还根据我之前找到的一个代码笔复制了一个更精简的代码版本，它可以工作 (https://codepen.io/Juan-Sin-Miedos/pen/jOWOyWW)

为什么我的项目不起作用？

任何帮助将不胜感激，非常感谢！

Answer 1

因为这个 pull request 没有合并并且最新版本很旧，你需要从 git 安装这个版本。这是您应该输入 package.json 而不是版本号的内容：

"vuedraggable": "git://github.com/divinespear/Vue.Draggable.git#multi-drag"

Answer 2

如果您想确保始终使用最新版本，您可以在从 SortableJS 库初始化后添加 MultiDrag 插件。

以通常的方式将 vuedraggable 依赖项添加到您的 pack.json 文件中：

"vuedraggable": "^2.24.3"

在组件的开头，而不是基本导入，例如：

<script>
    import draggable from 'vuedraggable';
    
    // rest of js component code

</script>

执行以下操作：

<script>
    import { Sortable, MultiDrag } from 'sortablejs';
    import draggable from 'vuedraggable';

    Sortable.mount(new MultiDrag());
    
    // rest of js component code

</script>

Answer 3

"vuedraggable": "git://github.com/divinespear/Vue.Draggable.git#multi-drag"

以上 repo 在 dist 中有问题。请改用这个。

"vuedraggable": "git://github.com/midasdev711/Vue-DragDrop.git"

SortableJS / Vue.Draggable 多拖动选项不起作用

SortableJS / Vue.Draggable multi-drag option not working

vue.js

sortablejs

vuedraggable

multi-drag