5

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

我已经看到了可以完美运行的示例，例如：

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

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

  • Vue：2.6.10
  • 可拖动：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"
          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>

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

打印为可拖动列表的对象位于此 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
      }
    }
  }
}

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

为什么它不适用于我的项目？

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

4

3 回答 3

7

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

“vuedraggable”：“git://github.com/divinespear/Vue.Draggable.git#multi-drag”

于 2020-06-03T16:17:39.863 回答
3 
"vuedraggable": "git://github.com/divinespear/Vue.Draggable.git#multi-drag"

上面的 repo 在 dist 中有一个问题。请改用这个。

"vuedraggable": "git://github.com/midasdev711/Vue-DragDrop.git"
于 2021-06-19T06:34:08.633 回答
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>
于 2021-04-08T08:32:59.337 回答