diff --git a/README.md b/README.md
index 57768c48..7401b102 100644
--- a/README.md
+++ b/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)
diff --git a/example/components/multidrag.vue b/example/components/multidrag.vue
new file mode 100644
index 00000000..d701ec3b
--- /dev/null
+++ b/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>
diff --git a/src/vuedraggable.d.ts b/src/vuedraggable.d.ts
index ec3b3340..1c31369a 100644
--- a/src/vuedraggable.d.ts
+++ b/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;
     }
   >;
 
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
index 84702206..bad8cc4f 100644
--- a/src/vuedraggable.js
+++ b/src/vuedraggable.js
@@ -1,6 +1,22 @@
-import Sortable from "sortablejs";
+import Sortable, { MultiDrag } from "sortablejs";
 import { insertNodeAt, camelize, console, removeNode } from "./util/helper";
 
+function createSortableInstance(rootContainer, options) {
+  const sortable = new Sortable(rootContainer, options);
+  // check multidrag plugin loaded
+  // - cjs ("sortable.js") and complete esm ("sortable.complete.esm") mount MultiDrag automatically.
+  // - default esm ("sortable.esm") does not mount MultiDrag automatically.
+  if (options.multiDrag && !sortable.multiDrag) {
+    // mount plugin if not mounted
+    Sortable.mount(new MultiDrag());
+    // destroy and recreate sortable.js instance
+    sortable.destroy();
+    return createSortableInstance(rootContainer, options);
+  } else {
+    return sortable;
+  }
+}
+
 function buildAttribute(object, propName, value) {
   if (value === undefined) {
     return object;
@@ -98,8 +114,22 @@ function getComponentAttributes($attrs, componentData) {
   return attributes;
 }
 
+function getIndiciesToRemove(items, offset) {
+  return Array.from(items)
+    .reverse()
+    .map(({ index }) => index - offset);
+}
+
 const eventsListened = ["Start", "Add", "Remove", "Update", "End"];
-const eventsToEmit = ["Choose", "Unchoose", "Sort", "Filter", "Clone"];
+const eventsToEmit = [
+  "Choose",
+  "Unchoose",
+  "Sort",
+  "Filter",
+  "Clone",
+  "Select",
+  "Deselect"
+];
 const readonlyProperties = ["Move", ...eventsListened, ...eventsToEmit].map(
   evt => "on" + evt
 );
@@ -143,6 +173,22 @@ const props = {
     type: Object,
     required: false,
     default: null
+  },
+  // plugin: multidrag
+  multiDrag: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  multiDragKey: {
+    type: String,
+    required: false,
+    default: null
+  },
+  selectedClass: {
+    type: String,
+    required: false,
+    default: null
   }
 };
 
@@ -217,13 +263,21 @@ const draggableComponent = {
       return res;
     }, {});
 
+    if (this.multiDrag) {
+      optionsAdded.multiDrag = this.multiDrag;
+      ["selectedClass", "multiDragKey"]
+        .filter(key => this[key])
+        .forEach(key => (optionsAdded[key] = this[key]));
+    }
+
     const options = Object.assign({}, this.options, attributes, optionsAdded, {
       onMove: (evt, originalEvent) => {
         return this.onDragMove(evt, originalEvent);
       }
     });
     !("draggable" in options) && (options.draggable = ">*");
-    this._sortable = new Sortable(this.rootContainer, options);
+
+    this._sortable = createSortableInstance(this.rootContainer, options);
     this.computeIndexes();
   },
 
@@ -349,12 +403,37 @@ const draggableComponent = {
       this.alterList(spliceList);
     },
 
+    removeAllFromList(indicies) {
+      const spliceList = list =>
+        indicies.forEach(index => list.splice(index, 1));
+      this.alterList(spliceList);
+    },
+
     updatePosition(oldIndex, newIndex) {
       const updatePosition = list =>
         list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
       this.alterList(updatePosition);
     },
 
+    /**
+     * @param {number[]} oldIndicies
+     * @param {number} newIndex
+     */
+    updatePositions(oldIndicies, newIndex) {
+      /** @type {<T = any>(list: T[]) => T[]} */
+      const updatePosition = list => {
+        // get selected items with correct order
+        // sort -> reverse (for prevent Array.splice side effect) -> splice -> reverse
+        const items = oldIndicies
+          .sort()
+          .reverse()
+          .flatMap(oldIndex => list.splice(oldIndex, 1))
+          .reverse();
+        return list.splice(newIndex, 0, ...items);
+      };
+      this.alterList(updatePosition);
+    },
+
     getRelatedContextFromMoveEvent({ to, related }) {
       const component = this.getUnderlyingPotencialDraggableComponent(to);
       if (!component) {
@@ -393,12 +472,46 @@ const draggableComponent = {
     },
 
     onDragStart(evt) {
+      if (evt.items) {
+        this.multidragContexts = evt.items.map(e => this.getUnderlyingVm(e));
+        const elements = this.multidragContexts
+          .sort(({ index: a }, { index: b }) => a - b)
+          .map(e => e.element);
+        evt.item._underlying_vm_multidrag_ = this.clone(elements);
+      }
       this.context = this.getUnderlyingVm(evt.item);
       evt.item._underlying_vm_ = this.clone(this.context.element);
       draggingElement = evt.item;
     },
 
     onDragAdd(evt) {
+      if (evt.items) {
+        this.onDragAddMulti(evt);
+      } else {
+        this.onDragAddSingle(evt);
+      }
+    },
+
+    onDragAddMulti(evt) {
+      const elements = evt.item._underlying_vm_multidrag_;
+      if (elements === undefined) {
+        return;
+      }
+      // remove nodes
+      evt.items.forEach(e => removeNode(e));
+      // insert elements
+      const newIndex = this.getVmIndex(evt.newIndex);
+      this.spliceList(newIndex, 0, ...elements);
+      this.computeIndexes();
+      // emit change
+      const added = elements.map((element, index) => ({
+        element,
+        newIndex: newIndex + index
+      }));
+      this.emitChanges({ added });
+    },
+
+    onDragAddSingle(evt) {
       const element = evt.item._underlying_vm_;
       if (element === undefined) {
         return;
@@ -412,6 +525,45 @@ const draggableComponent = {
     },
 
     onDragRemove(evt) {
+      if (evt.items) {
+        this.onDragRemoveMulti(evt);
+      } else {
+        this.onDragRemoveSingle(evt);
+      }
+    },
+
+    onDragRemoveMulti(evt) {
+      // for match item index and element index
+      const headerSize = (this.$slots.header || []).length || 0;
+      // sort old indicies
+      // - "order by index asc" for prevent Node.insertBefore side effect
+      const items = evt.oldIndicies.sort(({ index: a }, { index: b }) => a - b);
+      // restore nodes
+      items.forEach(({ multiDragElement: item, index }) => {
+        insertNodeAt(this.rootContainer, item, index);
+        if (item.parentNode) {
+          Sortable.utils.deselect(item);
+        }
+      });
+      // if clone
+      if (evt.pullMode === "clone") {
+        removeNode(evt.clone);
+        return;
+      }
+      // remove items and reset transition data
+      // - "order by index desc" (call reverse()) for prevent Array.splice side effect
+      const indiciesToRemove = getIndiciesToRemove(items, headerSize);
+      indiciesToRemove.forEach(oldIndex => this.resetTransitionData(oldIndex));
+      this.removeAllFromList(indiciesToRemove);
+      // emit change
+      const removed = indiciesToRemove.sort().map(oldIndex => {
+        const context = this.multidragContexts.find(e => e.index === oldIndex);
+        return { element: context.element, oldIndex };
+      });
+      this.emitChanges({ removed });
+    },
+
+    onDragRemoveSingle(evt) {
       insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
       if (evt.pullMode === "clone") {
         removeNode(evt.clone);
@@ -425,6 +577,46 @@ const draggableComponent = {
     },
 
     onDragUpdate(evt) {
+      if (evt.items) {
+        this.onDragUpdateMulti(evt);
+      } else {
+        this.onDragUpdateSingle(evt);
+      }
+    },
+
+    onDragUpdateMulti(evt) {
+      const { items, from } = evt;
+      // for match item index and element index
+      const headerSize = (this.$slots.header || []).length || 0;
+      // remove nodes
+      items.forEach(item => removeNode(item));
+      // sort items
+      // note: "order by oldIndex asc" for prevent Node.insertBefore side effect
+      const itemsWithIndex = Array.from(evt.oldIndicies).sort(
+        ({ index: a }, { index: b }) => a - b
+      );
+      // insert nodes
+      itemsWithIndex.forEach(e =>
+        insertNodeAt(from, e.multiDragElement, e.index)
+      );
+      // move items
+      const oldIndicies = itemsWithIndex.map(({ index }) => index - headerSize);
+      const newIndex = this.getVmIndex(evt.newIndex);
+      // note: Array.from = prevent sort change side effect
+      this.updatePositions(Array.from(oldIndicies), newIndex);
+      // emit change
+      const moved = oldIndicies.map((oldIndex, index) => {
+        const context = this.multidragContexts.find(e => e.index === oldIndex);
+        return {
+          element: context.element,
+          oldIndex,
+          newIndex: newIndex + index
+        };
+      });
+      this.emitChanges({ moved });
+    },
+
+    onDragUpdateSingle(evt) {
       removeNode(evt.item);
       insertNodeAt(evt.from, evt.item, evt.oldIndex);
       const oldIndex = this.context.index;
diff --git a/tests/unit/vuedraggable.multidrag.spec.js b/tests/unit/vuedraggable.multidrag.spec.js
new file mode 100644
index 00000000..f5aedc4b
--- /dev/null
+++ b/tests/unit/vuedraggable.multidrag.spec.js
@@ -0,0 +1,518 @@
+import { shallowMount } from '@vue/test-utils';
+import Sortable from 'sortablejs';
+
+import draggable from '@/vuedraggable';
+import Vue from 'vue';
+
+function create(options) {
+  const { propsData: { list: items = [] } } = options;
+  const opts = Object.assign({
+    attrs: {
+      sortableOption: 'value',
+      'to-be-camelized': true,
+    },
+    slots: {
+      default: items.map((item) => `<div class="item">${item}</div>`),
+      header: '<header/>',
+      footer: '<footer/>',
+    },
+  }, options);
+  const wrapper = shallowMount(draggable, opts);
+  const { vm, element } = wrapper;
+  const { $options: { props } } = vm;
+  return { wrapper, vm, props, element };
+}
+
+/**
+ * @param {'addEventListener' | 'removeEventListener'} listnerName 
+ * @param {GlobalEventHandlers[listnerName]} callback 
+ * @returns {jest.SpyInstance}
+ */
+function eventListnerDelegationMock(listnerName, callback) {
+  const instance = jest.spyOn(document, listnerName);
+  const actual = instance.getMockImplementation();
+  return instance.mockImplementation((type, listener, options) => {
+    actual.call(document, type, listener, options);
+    callback && callback(type, listener, options);
+  });
+}
+
+describe('draggable.vue with multidrag plugin', () => {
+  describe('when initialized', () => {
+    const { error } = console;
+    const { warn } = console;
+
+    beforeEach(() => {
+      console.error = jest.fn();
+      console.warn = jest.fn();
+    });
+
+    afterEach(() => {
+      console.error = error;
+      console.warn = warn;
+    });
+
+    it('instantiate without error', () => {
+      const { wrapper, vm } = create({
+        propsData: {
+          multiDrag: true,
+          selectedClass: 'selected',
+        },
+      });
+      expect(console.warn).not.toBeCalled();
+      expect(wrapper).not.toBeUndefined();
+      expect(vm._sortable.multiDrag).not.toBeUndefined();
+    });
+  });
+
+  describe('should have props', () => {
+    const { props } = create({
+      propsData: {
+        multiDrag: true,
+        selectedClass: 'selected',
+      },
+    });
+
+    test.each([
+      [
+        'multiDrag',
+        {
+          type: Boolean,
+          required: false,
+          default: false,
+        },
+      ],
+      [
+        'multiDragKey',
+        {
+          type: String,
+          required: false,
+          default: null,
+        },
+      ],
+      [
+        'selectedClass',
+        {
+          type: String,
+          required: false,
+          default: null,
+        },
+      ],
+    ])('%s equal to %o', (name, value) => {
+      const propsValue = props[name];
+      expect(propsValue).toEqual(value);
+    });
+  });
+
+  describe('item select and deselect', () => {
+    /** @type {import('@vue/test-utils').Wrapper<Vue>} */
+    let wrapper;
+    /** @type {Vue} */
+    let vm;
+    /** @type {jest.SpyInstance} */
+    let addEventListenerMock;
+    /** @type {jest.SpyInstance} */
+    let removeEventListenerMock;
+
+    beforeEach(() => {
+      // event listener delegation hack
+      addEventListenerMock = eventListnerDelegationMock('addEventListener', (type, listener, options) => {
+        wrapper?.element?.addEventListener(type, listener, options);
+      });
+      removeEventListenerMock = eventListnerDelegationMock('removeEventListener', (type, listener, options) => {
+        wrapper?.element?.removeEventListener(type, listener, options);
+      });
+
+      // component
+      const items = ['a', 'b', 'c', 'd'];
+      const { wrapper: _w, vm: _v } = create({
+        propsData: {
+          list: items,
+          multiDrag: true,
+          selectedClass: 'selected',
+        },
+      });
+      wrapper = _w;
+      vm = _v;
+    });
+
+    afterEach(() => {
+      addEventListenerMock.mockRestore();
+      removeEventListenerMock.mockRestore();
+    });
+
+    it('should be selected', async () => {
+      const wrapperItems = wrapper.findAll('.item');
+      const item1 = wrapperItems.at(0);
+      const item2 = wrapperItems.at(wrapperItems.length - 1);
+
+      expect(item1.element.matches('.selected')).toBe(false);
+      expect(item2.element.matches('.selected')).toBe(false);
+
+      // select first item
+      // simulate mouse event
+      await item1.trigger('mousedown').then(() => item1.trigger('mouseup'));
+      expect(item1.element.matches('.selected')).toBe(true);
+
+      // select second item
+      // simulate mouse event
+      await item2.trigger('mousedown').then(() => item2.trigger('mouseup'));
+      expect(item2.element.matches('.selected')).toBe(true);
+
+      // check emit event
+      const { select: selectEmit } = wrapper.emitted();
+      expect(selectEmit).not.toBeUndefined();
+      expect(selectEmit).toHaveLength(2);
+      const [[emitEvent1], [emitEvent2]] = selectEmit;
+      expect(emitEvent1.items).toEqual([item1.element]);
+      expect(emitEvent1.newIndicies).toEqual([{ multiDragElement: item1.element, index: 1 }]);
+      expect(emitEvent2.items).toEqual([item1.element, item2.element]);
+      expect(emitEvent2.newIndicies).toEqual([{ multiDragElement: item1.element, index: 1 }, { multiDragElement: item2.element, index: 4 }]);
+    });
+
+    it('should be deselected', async () => {
+      const wrapperItems = wrapper.findAll('.item');
+      const item1 = wrapperItems.at(0);
+      const item2 = wrapperItems.at(wrapperItems.length - 1);
+
+      // select items for deselect
+      Sortable.utils.select(item1.element);
+      Sortable.utils.select(item2.element);
+
+      expect(item1.element.matches('.selected')).toBe(true);
+      expect(item2.element.matches('.selected')).toBe(true);
+
+      // deselect first item
+      // simulate mouse event
+      await item1.trigger('mousedown').then(() => item1.trigger('mouseup'));
+      expect(item1.element.matches('.selected')).toBe(false);
+
+      // deselect second item
+      // simulate mouse event
+      await item2.trigger('mousedown').then(() => item2.trigger('mouseup'));
+      expect(item2.element.matches('.selected')).toBe(false);
+
+      // check emit event
+      const { deselect: deselectEmit } = wrapper.emitted();
+      expect(deselectEmit).not.toBeUndefined();
+      expect(deselectEmit).toHaveLength(2);
+      const [[emitEvent1], [emitEvent2]] = deselectEmit;
+      expect(emitEvent1.items).toEqual([item2.element]);
+      expect(emitEvent1.newIndicies).toEqual([{ multiDragElement: item2.element, index: 4 }]);
+      expect(emitEvent2.items).toEqual([]);
+      expect(emitEvent2.newIndicies).toEqual([]);
+    });
+  });
+
+  describe('multi item drag and drop', () => {
+    /** @type {import('@vue/test-utils').Wrapper<Vue>} */
+    let wrapper;
+    /** @type {import('@vue/test-utils').WrapperArray<Vue>} */
+    let wrapperItems;
+    /** @type {import('@vue/test-utils').Wrapper<Vue>} */
+    let item1;
+    /** @type {import('@vue/test-utils').Wrapper<Vue>} */
+    let item2;
+    /** @type {Vue} */
+    let vm;
+    /** @type {jest.SpyInstance} */
+    let addEventListenerMock;
+    /** @type {jest.SpyInstance} */
+    let removeEventListenerMock;
+    /** @type {(event: Event) => void} */
+    let onStart;
+    /** @type {(event: Event) => void} */
+    let onUpdate;
+    /** @type {(event: Event) => void} */
+    let onAdd;
+    /** @type {(event: Event) => void} */
+    let onRemove;
+
+    beforeEach(() => {
+      // event listener delegation hack
+      addEventListenerMock = eventListnerDelegationMock('addEventListener', (type, listener, options) => {
+        wrapper?.element?.addEventListener(type, listener, options);
+      });
+      removeEventListenerMock = eventListnerDelegationMock('removeEventListener', (type, listener, options) => {
+        wrapper?.element?.removeEventListener(type, listener, options);
+      });
+
+      // component
+      const items = ['a', 'b', 'c', 'd'];
+      const { wrapper: _w, vm: _v } = create({
+        propsData: {
+          list: items,
+          multiDrag: true,
+          selectedClass: 'selected',
+        },
+      });
+      wrapper = _w;
+      vm = _v;
+      wrapperItems = wrapper.findAll('.item');
+
+      onStart = vm._sortable.options.onStart;
+      onUpdate = vm._sortable.options.onUpdate;
+      onAdd = vm._sortable.options.onAdd;
+      onRemove = vm._sortable.options.onRemove;
+    });
+
+    afterEach(() => {
+      addEventListenerMock.mockRestore();
+      removeEventListenerMock.mockRestore();
+    });
+
+    describe('when drop first and second into last', () => {
+      beforeEach(async () => {
+        item1 = wrapperItems.at(0);
+        item2 = wrapperItems.at(1);
+
+        // start drag from first item
+        const startEvent = {
+          item: item1.element,
+          items: [item1.element, item2.element],
+        };
+        onStart(startEvent);
+        await Vue.nextTick();
+
+        // drop to last item
+        const updateEvent = {
+          from: wrapper.element,
+          newIndex: 3,
+          newDraggableIndex: 3,
+          oldIndex: 1,
+          oldDraggableIndex: 1,
+          item: item1.element,
+          items: [item1.element, item2.element],
+          oldIndicies: [
+            { multiDragElement: item1.element, index: 1 },
+            { multiDragElement: item2.element, index: 2 },
+          ],
+          newIndicies: [
+            { multiDragElement: item1.element, index: 3 },
+            { multiDragElement: item2.element, index: 4 },
+          ],
+        };
+        onUpdate(updateEvent);
+        await Vue.nextTick();
+      });
+
+      it('should changed', () => {
+        expect(vm.list).toEqual(['c', 'd', 'a', 'b']);
+      });
+
+      it('should send events', () => {
+        const expectedEvents = {
+          moved: [
+            { element: 'a', oldIndex: 0, newIndex: 2 },
+            { element: 'b', oldIndex: 1, newIndex: 3 }
+          ]
+        };
+        const { start: startEmit, update: updateEmit, change: changeEmit } = wrapper.emitted();
+        expect(startEmit).toHaveLength(1);
+        expect(updateEmit).toHaveLength(1);
+        expect(changeEmit).toHaveLength(1);
+        expect(changeEmit).toEqual([[expectedEvents]]);
+      });
+    });
+
+    describe('when drop second and first into last', () => {
+      beforeEach(async () => {
+        item1 = wrapperItems.at(0);
+        item2 = wrapperItems.at(1);
+  
+        // start drag from first item
+        const startEvent = {
+          item: item2.element,
+          items: [item2.element, item1.element],
+        };
+        onStart(startEvent);
+        await Vue.nextTick();
+
+        // drop to last item
+        const updateEvent = {
+          from: wrapper.element,
+          newIndex: 3,
+          newDraggableIndex: 3,
+          oldIndex: 1,
+          oldDraggableIndex: 1,
+          item: item1.element,
+          items: [item2.element, item1.element],
+          oldIndicies: [
+            { multiDragElement: item2.element, index: 2 },
+            { multiDragElement: item1.element, index: 1 },
+          ],
+          newIndicies: [
+            { multiDragElement: item2.element, index: 4 },
+            { multiDragElement: item1.element, index: 3 },
+          ],
+        };
+        onUpdate(updateEvent);
+        await Vue.nextTick();
+      });
+
+      it('should changed', () => {
+        expect(vm.list).toEqual(['c', 'd', 'a', 'b']);
+      });
+
+      it('should send events', () => {
+        const expectedEvents = {
+          moved: [
+            { element: 'a', oldIndex: 0, newIndex: 2 },
+            { element: 'b', oldIndex: 1, newIndex: 3 }
+          ]
+        };
+        const { start: startEmit, update: updateEmit, change: changeEmit } = wrapper.emitted();
+        expect(startEmit).toHaveLength(1);
+        expect(updateEmit).toHaveLength(1);
+        expect(changeEmit).toHaveLength(1);
+        expect(changeEmit).toEqual([[expectedEvents]]);
+      });
+    });
+
+    describe('when drop second and last into first', () => {
+      beforeEach(async () => {
+        item1 = wrapperItems.at(1);
+        item2 = wrapperItems.at(3);
+  
+        // start drag from second item
+        const startEvent = {
+          item: item1.element,
+          items: [item1.element, item2.element],
+        };
+        onStart(startEvent);
+        await Vue.nextTick();
+
+        // drop to first item
+        const updateEvent = {
+          from: wrapper.element,
+          newIndex: 1,
+          newDraggableIndex: 1,
+          oldIndex: 2,
+          oldDraggableIndex: 2,
+          item: item1.element,
+          items: [item2.element, item1.element],
+          oldIndicies: [
+            { multiDragElement: item1.element, index: 2 },
+            { multiDragElement: item2.element, index: 4 },
+          ],
+          newIndicies: [
+            { multiDragElement: item1.element, index: 1 },
+            { multiDragElement: item2.element, index: 2 },
+          ],
+        };
+        onUpdate(updateEvent);
+        await Vue.nextTick();
+      });
+
+      it('should changed', () => {
+        expect(vm.list).toEqual(['b', 'd', 'a', 'c']);
+      });
+
+      it('should send events', () => {
+        const expectedEvents = {
+          moved: [
+            { element: 'b', oldIndex: 1, newIndex: 0 },
+            { element: 'd', oldIndex: 3, newIndex: 1 }
+          ]
+        };
+        const { start: startEmit, update: updateEmit, change: changeEmit } = wrapper.emitted();
+        expect(startEmit).toHaveLength(1);
+        expect(updateEmit).toHaveLength(1);
+        expect(changeEmit).toHaveLength(1);
+        expect(changeEmit).toEqual([[expectedEvents]]);
+      });
+    });
+
+    describe('when drop from other (add)', () => {
+      /** @type {HTMLElement[]} */
+      let newElements;
+
+      beforeEach(async () => {
+        const newItems = ['x', 'y'];
+        newElements = newItems.map((item) => {
+          const element = document.createElement('div');
+          element.appendChild(document.createTextNode(item));
+          return element;
+        });
+        const newElement = newElements[0];
+        newElement._underlying_vm_multidrag_ = newItems;
+
+        // drop after last item
+        const addEvent = {
+          newIndex: 5,
+          newDraggableIndex: 5,
+          item: newElement,
+          items: newElements,
+        };
+        onAdd(addEvent);
+        await Vue.nextTick();
+      });
+
+      it('should added', () => {
+        expect(vm.list).toEqual(['a', 'b', 'c', 'd', 'x', 'y']);
+      });
+
+      it('should send events', () => {
+        const expectedEvents = {
+          added: [
+            { element: 'x', newIndex: 4 },
+            { element: 'y', newIndex: 5 }
+          ]
+        };
+        const { add: addEmit, change: changeEmit } = wrapper.emitted();
+        expect(addEmit).toHaveLength(1);
+        expect(changeEmit).toHaveLength(1);
+        expect(changeEmit).toEqual([[expectedEvents]]);
+      });
+    });
+
+    describe('when drop to other (remove)', () => {
+      beforeEach(async () => {
+        item1 = wrapperItems.at(0);
+        item2 = wrapperItems.at(2);
+  
+        // start drag from first item
+        const startEvent = {
+          item: item1.element,
+          items: [item1.element, item2.element],
+        };
+        onStart(startEvent);
+        await Vue.nextTick();
+
+        wrapper.element.removeChild(item1.element);
+        wrapper.element.removeChild(item2.element);
+
+        // drop after last item
+        const removeEvent = {
+          newIndex: 5,
+          newDraggableIndex: 5,
+          item: item1,
+          items: [item1, item2],
+          oldIndicies: [
+            { multiDragElement: item1.element, index: 1 },
+            { multiDragElement: item2.element, index: 3 },
+          ],
+        };
+        onRemove(removeEvent);
+        await Vue.nextTick();
+      });
+
+      it('should removed', () => {
+        expect(vm.list).toEqual(['b', 'd']);
+      });
+
+      it('should send events', () => {
+        const expectedEvents = {
+          removed: [
+            { element: 'a', oldIndex: 0 },
+            { element: 'c', oldIndex: 2 }
+          ]
+        };
+        const { remove: removeEmit, change: changeEmit } = wrapper.emitted();
+        expect(removeEmit).toHaveLength(1);
+        expect(changeEmit).toHaveLength(1);
+        expect(changeEmit).toEqual([[expectedEvents]]);
+      });
+    });
+  });
+});