一个轻量的 Vue 拖动排序插件
soap72twsite
8年前
<h2>Awe-dnd</h2> <p>Makes your elements draggable in Vue.</p> <p><img src="https://simg.open-open.com/show/71d3bf4d15f67bd9d94156a944357713.gif"></p> <p>See Demo: <a href="/misc/goto?guid=4959725667822635608" rel="nofollow,noindex">http://hilongjw.github.io/vue-dragging/</a></p> <p>Some of goals of this project worth noting include:</p> <ul> <li>support desktop and mobile</li> <li>Vue data-driven philosophy</li> <li>Supports both of Vue 1.0 and Vue 2.0</li> </ul> <h2>Requirements</h2> <ul> <li>Vue: ^1.0.0 or ^2.0.0</li> </ul> <h2>Install</h2> <p>From npm:</p> <pre> <code class="language-groovy">$ npm install awe-dnd --save</code></pre> <h2>Usage</h2> <pre> <code class="language-groovy">//main.js import VueDND from 'awe-dnd' Vue.use(VueDND)</code></pre> <pre> <code class="language-groovy"><!--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></code></pre> <h2>API</h2> <p>v-dragging="{ item: color, list: colors, group: 'color' }"</p> <p>Arguments:</p> <ul> <li>{item} Object</li> <li>{list} Array</li> <li> <p>{group} String</p> <p>group is unique key of dragable list.</p> </li> </ul> <p>Example</p> <pre> <code class="language-groovy"><!-- 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="color.text" >{{color.text}}</div> </div></code></pre> <p> </p> <p> </p>