v-dragger
TypeScript icon, indicating that this package has built-in type declarations

1.2.8 • Public • Published

v-dragger

Current Release Bundle Size Vue

Is only working on Vue3 for now. not Vue2.

Install

npm i v-dragger

use

import { createApp } from "vue";
import App from "./App.vue";
import useDragger from "v-dragger";
 
createApp(App).use(useDragger).mount("#app");

<table></table> supported

// options
<div
  v-drag-item="{
    trigger: string,
    onDragend: (indexMap: Record<number, number>) => void,
  }"
/>
 
// only set ondragend handler
<div v-drag-item="(indexMap: Record<number, number>) => void" />

Usage

<ul>
  <li v-drag-item>1</li>
  <li v-drag-item>2</li>
  <li v-drag-item>3</li>
</ul>

Group

Group drag items by v-dragger.

<ul v-dragger>
  <li v-drag-item>group1-1</li>
  <li v-drag-item>group1-2</li>
  <li v-drag-item>group1-3</li>
</ul>
 
<ul v-dragger>
  <li v-drag-item>group1-1</li>
  <li v-drag-item>group1-2</li>
  <li v-drag-item>group1-3</li>
</ul>

or just set the group name.

<ul>
  <li v-drag-item:group1>group1-1</li>
  <li v-drag-item:group1>group1-2</li>
  <li v-drag-item:group1>group1-3</li>
 
  <li v-drag-item:group2>group2-4</li>
  <li v-drag-item:group2>group2-5</li>
  <li v-drag-item:group2>group2-6</li>
</ul>

Trigger

<ul>
  <li v-drag-item><span v-drag-trigger>Drag me<span> 2</li>
  <li v-drag-item><span v-drag-trigger>Drag me<span> 1</li>
  <li v-drag-item><span v-drag-trigger>Drag me<span> 3</li>
</ul>
 
<ul>
  <li v-drag-item="{ trigger: '.trigger' }"><span class="trigger">Drag me<span> 2</li>
  <li v-drag-item="{ trigger: '.trigger' }"><span class="trigger">Drag me<span> 1</li>
  <li v-drag-item="{ trigger: '.trigger' }"><span class="trigger">Drag me<span> 3</li>
</ul>

Event

<ul>
  <li v-drag-item="onDragendCaller"></li>
  <li v-drag-item="onDragendCaller"></li>
  <li v-drag-item="onDragendCaller"></li>
</ul>
 
<script>
  export default {
    methods: {
      onDragendCaller(indexMap) {
        // 1 -> 2
        // 2 -> 1
 
        console.log(indexMap); // {0: 0, 1: 2, 2: 1, 3: 3, 4: 4}
      },
    },
  };
</script> 

or

<ul>
  <li v-drag-item="{ onDragend: onDragendCaller }"></li>
  <li v-drag-item="{ onDragend: onDragendCaller }"></li>
  <li v-drag-item="{ onDragend: onDragendCaller }"></li>
</ul>

Package Sidebar

Install

npm i v-dragger

Weekly Downloads

1

Version

1.2.8

License

ISC

Unpacked Size

34.4 kB

Total Files

11

Last publish

Collaborators

  • wowissu