vue-cross-platform-drag-drop v2.0.1

Vue cross platform drag drop components

Cross platform

It has the same behavior on mobile (touch) and desktop browsers.

Usage

<template>
<Draggable
    @startDrag="startDragHandler"
    @endDrag="endDragHandler"
    class-on-drag="my-dragging-effect"
    :payload="{ myKey: 'myValue' }"
>
  <other-content />
</Draggable>
<Dropable @onDrop="dropHandler" drag-over-class="my-drag-over-effect" >
  <more-content />
</Dropable>
</template>

<script>
import { Draggable, Dropable } from "vue-cross-platform-drag-drop";
export default {
    name: "MyApp",
    components: {
        Draggable,
        Dropable,
    },
    methods: {
        startDragHandler(payload) {
            console.log(payload);
        },
        endDragHandler(payload) {
            console.log(payload);
        },
        dropHandler(payload) {
            console.log(payload);
        },
    },
}
</script>

Notes

• class-on-drag will be added to the draggable component while the Draggable component is being dragged and will be removed when the drag ends.
• drag-over-class will be added to the dropable component when a draggable element is being dragged over it and will be removed when the element leaves the drop zone.
• payload has to be a POJO as it will be converted to JSON to transmit to the Dropable component. (no methods allowed)
• @startDrag, @endDrag and @onDrop are required. These are the handlers for the specified events.
• Both Draggable and Dropable components use slots so you can pass any valid vue between the opening and closing tags.
• payload will be passed as an argument to all the handlers.

Changes