npm install simple-vue-drag-directive
After installing the package, you can import as ES Module:
<script setup>
import { vDrag } from 'simple-vue-drag-directive'
</script>
<template>
<your-component v-drag={}></your-component>
</template>And now you can drag <your-compnonet></your-compnonet> everywhere!
All right, if you want more function, you can also give v-drag some value. Just like the following.
<template>
<your-component v-drag="{limit: 0.5, draggingClassList:['draging']}"></your-component>
</template>.draging {
opacity: 0.5;
}| property | value's type | default value | description |
|---|---|---|---|
| limit | number | 1 | This proporty is design to narrow down the range within which an mousedown event is useful. Assume the element with v-drag has a height of 100px ans a width of 100px and you set limit as 0.5, the area which can listen your mousedown event will be narrow down to 20px(height) x 100px(width). |
| draggingClassList | string[ ] | [ ] | Classes in the classList will be added to the dragging element, and will be removed when mouseup event emits. |
the directive code is in the ./src/directive
npm run dev
If you have any good ideas, welcome to fork the project.
My email address is [email protected].