Vue-dragging

一个列表排序的 vue 指令

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
  • 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"
        }]
    }
  }
}
</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

    group is unique key of dragable list.

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' }"
        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 }"
        :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)
    })
  }
}

License

The MIT License

Awe-dnd

让你的元素在 Vue 应用中可以拖动

查看 Demo : http://hilongjw.github.io/vue-dragging/

该项目的目标包括:

  • 支持桌面和移动端应用
  • 符合 Vue 数据驱动的思想
  • 同时支持 Vue 1.0 和 Vue 2.0

要求

  • Vue: ^1.0.0 or ^2.0.0

安装

npm 安装:


$ npm install awe-dnd --save

用法

//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"
        }]
    }
  }
}
</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' }"

参数:

  • {item} Object
  • {list} Array
  • {group} String

    group is unique key of dragable list.

示例

<!-- 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' }"
        track-by="text"
    >{{color.text}}</div>
</div>

事件

<div class="color-list">
    <div 
        class="color-item" 
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
        :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)
    })
  }
}

许可

The MIT License

讨论区