james2doyle / vue-drag-and-drop

A for Vue.js directive for providing drag and drop capabilities to elements and data

vue-drag-and-drop

A directive for providing drag and drop capabilities to elements and data.

Install

Available through npm install vue-drag-and-drop or include as an inline script, like in example.html.

Mobile Support

This library simply wraps the native drag and drop in html5. There is no support, and probably never will be any, for native "drag and drop" on mobile. See this chart.

The reason for this is that touch devices already have the necessary events (touch events) to implement drag and drop without need the additional apis that the desktop drag and drop has.

If you need a cross-platform solution, you should check out this awesome library called pep!.

Demo

You can load up the example.html file here to test the directive.

Usage

Here is how you might typically use this directive:

<li v-for="task in tasks" v-bind:id="task.id" v-drag-and-drop v-on:drop="handleDrop" v-text="task.title"></li>

This directive assumes you are using it inside of some sort of list of elements.

You can see a Vue instance in example.html if you want more details.

vue-drag-and-drop's Issues

only drop option

i want to grab and drop in another div;
but the div that only should listen to v-drop, is draggable

Dropping an element triggers the browser to open that element

I try to use the directive like this:

<ul class="ImageFileUpload__images-list row">
            <li v-for="image in persistedImages" class="ImageFileUpload__image-wrapper col-md-3 col-xs-12" v-drag-and-drop drag-over="handleDragOver" drop="handleDrop">
                <div>drag me</div>
                <button type="button" class="btn btn-red ImageFileUpload__remove-image-button"
                        @click="removeImage(image)">
                    <span class="icon icon-delete"></span>
                </button>
                <img :src="image.webpath" class="ImageFileUpload__image img-responsive">
            </li>
        </ul>

It basically works, I see both of the triggered event outputs (drag-over and drop) in the console. However, once I drop the element where I want it to go, the browser opens that file in the current tab, taking me away from the site.

This also happens for elements that don't contain or are images - the browser then just tries to load the URL "http://www.*.com".

Is there some way to turn this behavior off or to get access to the underlying event object (in order to call event.preventDefault())?

Tested with Firefox 45.0.2.

Does not work in latest FireFox

While this works OK in Chrome, It does not provide any useful event data when used in FireFox

Warnings on directives in 1.0.16

Hey, great plugin, it's been super useful! One thing I've noticed is that as of the version of Vue I'm using (1.0.16, development version) console warnings will show for each element that uses a directive on page load. For example if you swap in Vue 1.0.16 into the example file you get:

vue.js:990 [Vue warn]: Failed to resolve directive: drop
vue.js:990 [Vue warn]: Failed to resolve directive: drag-end
vue.js:990 [Vue warn]: Failed to resolve directive: drag-leave
vue.js:990 [Vue warn]: Failed to resolve directive: drag-enter
vue.js:990 [Vue warn]: Failed to resolve directive: drag-over
vue.js:990 [Vue warn]: Failed to resolve directive: drag-start
vue.js:990 [Vue warn]: Failed to resolve directive: drop

This doesn't affect functionality, but can get annoying with large numbers of objects and directives.

support for vue 2.0?

vue 2.0 has just been release officially. hoping for an upgrade soon~

Preventing drag on input and textarea

Is it possible to prevent drag on input or textarea if they are placed inside draggable div? (to allow text selection with mouse, but outer div should be still draggable)

I have tried to override dragstart, dragenter etc. events on input and stop/prevent event propagation, but no luck.

Invalid demo url.

Support for touch devices

Hi, you saved my life, i think this is the only one Directive to create Drag and drop for Vue 1.0.* However i just noticed, it does not work for touch devices, it may be a good approach for future.

Cannot set property '_dragSrcEl' of undefined

I installed the plugin via npm, did make the Vue instance use it and added the directive v-drag-and-drop to the list element and I got the error in the title. Can anyone help please? I'm using this inside a component, is there any restrictions about using this plugin in nested components? It's also worth noting that I'm using vue 2.0. Thanks in advance

one bug

when 'handleDrop' called, the valiable '_dragSrcEl' do not Re assigned to 'null'

npm package is not up to date - firefox redirect bug

please merge/update the latest firefox fix for npm:

          if (e.preventDefault) {
            // stops the browser from redirecting.
            e.preventDefault();
          }

I want drag a table item to another table

I want to drag a table item to another table, I set another table handleDrop event, but I want to set another table item cannot be draggable, how can I do?

support draggable and droppable when drag or drag is used only

<li class="item" id="{{$index}}" v-for="item in list"
        v-drag-and-drop
        drag-start="handleDragStart"
        drag-over="handleDragOver"
        drag-enter="handleDragEnter"
        drag-leave="handleDragLeave"
        drag-end="handleDragEnd"
        drop="handleDrop"
        drag="handleDrag",
        draggable="true",
        droppable="false"
    >
      <span>{{item.name}}</span>
    </li>

when draggbale is false, the element can not be dragged;
when droppable is false, the element can not be dropped,
the option draggble and droppable is both default true

example.html drag-start events not work

Failed to resolve directive: drag-and-drop

<template>
  <div v-drag-and-drop>
      <div v-for="item in list">{{item}}</div>
  </div>
</template>
<script>
   import 'vue-drag-and-drop';
   export default {
      data() {
         return {
            list: [1, 2, 3]
         };
      };
   };
</script>

Vue: 2.0, but chrome consoles Failed to resolve directive: drag-and-drop, can you help me with my error?
Thank you~~

the rank is error

my code :
handleProductDrop: function (itemOne, itemTwo) {
var $itemOne = $(itemOne),
$itemTwo = $(itemTwo),
prtnode = $itemOne.parents('.form-horizontal').data('index');
if (!$itemOne.hasClass('del-groupceil')) {
$itemOne = $itemOne.parents('.del-groupceil');
}
if (!$itemTwo.hasClass('del-groupceil')) {
$itemTwo = $itemTwo.parents('.del-groupceil');
}
var bloks = this.blocks[prtnode].product_group;
this.loggedEvent = 'handleImageDrop';
var dummy = bloks[$itemOne.data('index')];
bloks.$set($itemOne.data('index'), bloks[$itemTwo.data('index')]);
bloks.$set($itemTwo.data('index'), dummy);
},

when drag the rank is error

cause an error when remove the drop item

this plugin help me a lot, thanks!

i want to change the drop item position but not swap their position

what i do is remove the drop item from the list and then insert the item into the list

        handleDrop(a, b) {
            a = a.getAttribute('data-index');
            b = b.getAttribute('data-index');

            const temp = JSON.parse(JSON.stringify(this.dialogs[a]));

            this.dialogs.splice(a, 1)
            this.dialogs.splice(b, 0, temp)
        }

but this cause an error

Uncaught TypeError: Cannot read property 'undefined' of null

error here

        this.handleDragEnd = function(e) {
          e.target.classList.remove('dragging', 'drag-over', 'drag-enter');

          // error 
          if (typeof(this.vm[this.params.dragEnd]) === 'function') {

            this.vm[this.params.dragEnd].call(this, e.target, e);
          }
        }.bind(this);

i think the error caused by the item be removed. and the solution is detect if the item exist when ready to call the dropEnd method

@james2doyle what do you think ? any other solution ?