多个方块矩形排列后，拖拽排序。vue-dnd-touch 移

Makes your elements draggable in Vue.

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

Some of goals of this project worth noting include:

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

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