问SortableJS / Vue.Draggable多拖动选项无效
EN

Stack Overflow用户

提问于 2020-06-02 19:40:07

回答 3查看 5K关注 0票数 5

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

我见过一些样本，它们的工作原理非常完美，例如：

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

以下是我的项目的细节：

Vue：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"
          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-class属性，这是SortableJS / 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
      }
    }
  }
}

尽管做了这么多努力，我还是做不到。我甚至可以根据我以前找到的代码版本之一复制一个更精简的代码版本(https://codepen.io/Juan-Sin-Miedos/pen/jOWOyWW)

为什么它不工作在我的项目上？

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

vue.js

sortablejs

vuedraggable

multi-drag

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-06-03 08:17:39

因为这个拉请求没有合并，而且最新的版本非常旧，所以您需要从git安装这个版本。这是您应该放在package.json中而不是版本号中的内容：

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

票数 7

Stack Overflow用户

发布于 2021-06-18 22:34:08

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

以上回购在dist有一个问题。请用这个代替。

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

票数 3

Stack Overflow用户

发布于 2021-04-08 00:32:59

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

按照通常的方式将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>