kyechan99 / dragond

🐲 Show helper device after dragging with dragond

Show helper device after dragging

Install

NPM

npm install dragond --save

Module

import { dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon } from 'dragond';

components: {
    dragond, dragondDevice, dragondMenu, dragondLine, dragondIcon
}

Usage

Detailed usage is in the Docs.

DragondDevice

Create dragondDevice component in the parent component to be used in common.

<dragondDevice>
    ...
</dragondDevice>

Dragond

Create dragond component in the space to recognize the drag.

<dragond @dragondData="dragondData">
    ...
</dragond>

And create the following function to retrieve the dragged data.

methods: {
    dragondData: function (data) {
        this.msg = data;
    }
}

DragondMenu

Please put it in to add a menu function in the DragondDevice.

<dragondDevice>
    <dragondMenu>drag</dragondMenu>
    <dragondMenu>...</dragondMenu>
</dragondDevice>

DragondLine

Use this component if you want to add lines between DragondMenu.

<dragondDevice>
    <dragondMenu>drag</dragondMenu>
    <dragondLine></dragondLine>         <!-- Like this -->
    <dragondMenu>ond</dragondMenu>
</dragondDevice>

DragondIcon

Use this component if you want to use the built-in icons.

<dragondMenu>
    <dragondIcon v-bind:icon="'...'"></dragondIcon>
</dragondMenu>