vue-multi-drag

vue-multi-drag


Vue implementation to support drag'n'drop multiple items at the same time. Most of the code comes from https://www.sitepoint.com/accessible-drag-drop/

See Demo in Codesandbox

Install

npm i vue-multi-drag --save

main.js

import VueMultiDrag from 'vue-multi-drag'
Vue.use(VueMultiDrag)

YourComponent.vue

<template>
  <div class="template-class">
    <div class="col col-3">
      <ul v-mz-dropzone>
        <li v-mz-drag 
        @dragend="method"
        @dragenter="method2"
        @dragexit="method3"
        @dragleave="method4"
        @dragover="method5"
        @dragstart="method6">Element 1</li>
        <li v-mz-drag>Element 2</li>
        <li v-mz-drag>Element 3</li>
        <li v-mz-drag>Element 4</li>
        <li v-mz-drag>Element 5</li>
      </ul>
    </div>
    <div class="col col-3">
      <ul v-mz-dropzone>
      
      </ul>
    </div>
    <div class="col col-3">
      <ul v-mz-dropzone>
      
      </ul>
    </div>
  </div>
</template>

The li-tags can also be generated with a for-loop

Features

• Directives (mz-drag, mz-dropzone)
• Support variable dropzones
• OnClick, OnHover, Dropover CSS customize

Roadmap

1. Item counter + Icon while dragging
2. Select All / Inverse Button
3. Better Documentation
4. Clean up package.json
5. Checkboxes next to the Items (optional) - similar to Windows 8 and above
6. Unit Tests
7. Options
8. DropZone Groups
9. Shadow Copy (similar to https://github.com/SortableJS/Vue.Draggable)

Missing Functionality

• options
• animations
• shadow copy (similar to https://github.com/SortableJS/Vue.Draggable)
• touch?
• dropzone groups

Roadmap Features in Detail

Item counter + Icon while dragging

In Windows when you have multiple items selected in the explorer and you start dragging, a big Icon with an selected Item counter appears above your cursor.
This helps keep track of selected items.

Options

DropZone Groups

Assign a group to each dropzone, so that items in that group can only be dropped in their corresponding group. For instance, there are 3 dropzones assigned to group 'groupX' and 2 dropzones assigned to group 'groupZ'. The items inside groupX can only be dropped to zones in 'groupX'.

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

License

ISC

Copyright (c) 2019 msz