ad

awe-dnd

A sortable list directive with Vue

Showing:

Popularity

Downloads/wk

1.9K

GitHub Stars

732

Maintenance

Last Commit

3yrs ago

Contributors

9

Package

Dependencies

0

Size (min+gzip)

1.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Drag & Drop

Readme

Awe-dnd

Makes your elements draggable in Vue.

See Demo: http://hilongjw.github.io/vue-dragging/

Some of goals of this project worth noting include:

  • support desktop and mobile
  • Vue data-driven philosophy
  • support multi comb drag
  • Supports both of Vue 1.0 and Vue 2.0

Requirements

  • Vue: ^1.0.0 or ^2.0.0

Install

From npm:


$ npm install awe-dnd --save

Usage

//main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)
<!--your.vue-->
<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },
  /* if your need multi drag
  mounted: function() {
      this.colors.forEach((item) => {
          Vue.set(item, 'isComb', false)
      })
  } */
}
</script>

<template>
  <div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
  </div>
</template>

API

v-dragging="{ item: color, list: colors, group: 'color' }"

Arguments:

  • {item} Object

  • {list} Array

  • {group} String

  • {comb} String

    group is unique key of dragable list.

    comb use for multi drag

Example

<!-- Vue2.0 -->
<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
        :key="color.text"
    >{{color.text}}</div>
</div>

<!-- Vue1.0 -->
<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
        track-by="text"
    >{{color.text}}</div>
</div>

Event

<div class="color-list">
    <div
        class="color-item"
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData, comb: 'isComb' }"
        :key="color.text"
    >{{color.text}}</div>
</div>
export default {
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', () => {

    })
  }
}

License

The MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial