drag-and-drop

This consists of two directives, draggable and droppable, which automatically add and remove event listeners for drag and drop capability.

Example

<div class="droppable" v-droppable="drop">
    <img id="dragitem1" v-draggable="drag" :src="require('./assets/icons/guy.svg')">
    <img id="dragitem2" v-draggable="drag" :src="require('./assets/icons/guy.svg')">
</div>
<div class="droppable" v-droppable="drop">
</div>

<script>
export default {
    methods: {
        drop: function(ev) {
            const id = ev.dataTransfer.getData('text');
            ev.target.appendChild(document.getElementById(id));
        },
        drag: function(ev) {
            ev.dataTransfer.setData('text', ev.target.id);
        }
    }
}
</script>

Drag the images to the other box:

Directives

draggable: Add this to elements that can be dragged

droppable: Add this to elements that items can be dropped onto.

TODO

Add touch/mobile support.

Source Code

Draggable

<script>
export default {
    bind: function(el, binding, vnode) {
        el.setAttribute('draggable', true);
        el.addEventListener('dragstart', binding.value);
    },
    unbind: function(el, binding, vnode) {
        el.removeEventListener('dragstart', binding.value);
    }
}
</script>

Droppable

<script>
const preventDefault = (ev) => ev.preventDefault();

export default {
    bind: function(el, binding, vnode) {
        el.addEventListener('dragover', preventDefault);
        el.addEventListener('drop', binding.value);
    },
    unbind: function(el, binding, vnode) {
        el.removeEventListener('dragover', preventDefault);
        el.removeEventListener('drop', binding.value);
    }
}
</script>