1. 程式人生 > >拖動排序的vue元件

拖動排序的vue元件

$ npm install awe-dnd --save

import VueDND from 'awe-dnd'

Vue.use(VueDND)

元件內容:
<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>
<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>