vue-multi-drag

Drag'n'Drop with multiple Elements. Provides a vue directive for draggable element and a vue directive for dropzones.

Usage no npm install needed!

<script type="module">
  import vueMultiDrag from 'https://cdn.skypack.dev/vue-multi-drag';
</script>

README

vue-multi-drag

![Vue-multi-drag icon](assets/drag.png)

Icons made by Pixelmeetup from www.flaticon.com is licensed by CC 3.0 BY

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

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