Integrate MultiDrag plugin

README.md

@@ -300,12 +300,33 @@ methods: {
   }
 ```
 
+#### multiDrag
+Type: `boolean`<br>
+Required: `false`<br>
+Default: `false`<br>
+
+Set `true` for activate [MultiDrag](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) plugin.
+
+#### multiDragKey
+Type: `string`<br>
+Required: `false`<br>
+Default: `undefined`<br>
+
+See "Selection key" part of [MultiDrag](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) plugin.
+
+#### selectedClass
+Type: `string`<br>
+Required: `false`<br>
+Default: `sortable-selected` (from Sortable.js)<br>
+
+The selected class is the HTML class that will be applied to the selected elements in the list.
+
 ### Events
 
 * Support for Sortable events:
 
-  `start`, `add`, `remove`, `update`, `end`, `choose`, `unchoose`, `sort`, `filter`, `clone`<br>
-  Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument.<br>
+  `start`, `add`, `remove`, `update`, `end`, `choose`, `unchoose`, `sort`, `filter`, `clone`, `select`, `deselect`<br>
+  Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone, onSelect, onDeselect are fired by Sortable.js with the same argument.<br>
   [See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
 
   Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)

example/components/multidrag.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="row">
+    <div class="col-3">
+      <h3>Draggable 1</h3>
+      <draggable
+        class="list-group"
+        v-model="list1"
+        group="people"
+        multi-drag
+        selected-class="selected"
+        @change="log"
+        @select="log"
+        @deselect="log"
+      >
+        <div
+          class="list-group-item"
+          v-for="(element, index) in list1"
+          :key="element.name"
+        >
+          {{ element.name }} {{ index }}
+        </div>
+      </draggable>
+    </div>
+
+    <div class="col-3">
+      <h3>Draggable 2</h3>
+      <draggable
+        class="list-group"
+        v-model="list2"
+        group="people"
+        multi-drag
+        selected-class="selected"
+        @change="log"
+        @select="log"
+        @deselect="log"
+      >
+        <div
+          class="list-group-item"
+          v-for="(element, index) in list2"
+          :key="element.name"
+        >
+          {{ element.name }} {{ index }}
+        </div>
+      </draggable>
+    </div>
+
+    <rawDisplayer class="col-3" :value="list1" title="List 1" />
+
+    <rawDisplayer class="col-3" :value="list2" title="List 2" />
+  </div>
+</template>
+
+<style scoped>
+.selected {
+  color: red !important;
+  background-color: rgba(255, 0, 0, 0.2) !important;
+}
+</style>
+
+<script>
+import draggable from "@/vuedraggable";
+
+export default {
+  name: "multi-drag",
+  display: "Multi Drag",
+  order: 18,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      list1: [
+        { name: "John", id: 1 },
+        { name: "Joao", id: 2 },
+        { name: "Jean", id: 3 },
+        { name: "Gerard", id: 4 }
+      ],
+      list2: [
+        { name: "Juan", id: 5 },
+        { name: "Edgard", id: 6 },
+        { name: "Johnson", id: 7 }
+      ]
+    };
+  },
+  methods: {
+    add: function() {
+      this.list.push({ name: "Juan" });
+    },
+    replace: function() {
+      this.list = [{ name: "Edgard" }];
+    },
+    clone: function(el) {
+      return {
+        name: el.name + " cloned"
+      };
+    },
+    log: function(evt) {
+      window.console.log(evt);
+    }
+  }
+};
+</script>

src/vuedraggable.d.ts

@@ -68,6 +68,10 @@ declare module 'vuedraggable' {
       tag?: string | null;
       move: any;
       componentData: any;
+      // plugin: multidrag
+      multiDrag?: boolean;
+      multiDragKey?: string;
+      selectedClass?: string;
     }
   >;