vuedraggable示例_vue拖拽列表vuedraggable

效果：

要点：

npm install vuedraggable

引入

import draggable from 'vuedraggable'

使用

<vuedraggable class="wrapper" v-model="list"><transition-group><div v-for="item in list" :key="item" class="item"><p>{{item}}</p></div></transition-group></vuedraggable>

示例：

<template><div :style="{display:'flex'}"><draggablev-model="boy":options="{animation:500,group:'people'}"><transition-group><divv-for="e in boy":key="e.text"><el-buttontype="primary"style="width: 300px;margin: 20px;">{{e.text}}</el-button></div></transition-group></draggable><draggablev-model="girl":options="{animation:500,group:'people'}"><transition-group><divv-for="e in girl":key="e.text"><el-buttontype="danger"style="width: 300px;margin: 20px;">{{e.text}}</el-button></div></transition-group></draggable></div></template><script>import draggable from "vuedraggable";export default {name: "PageDrag",data() {return {boy: [{ text: "林1" },{ text: "林2" },{ text: "林3" },{ text: "林4" },{ text: "林5" },{ text: "林6" },{ text: "林7" },{ text: "林8" },{ text: "林9" }],girl: [{ text: "李1" },{ text: "李2" },{ text: "李3" },{ text: "李4" },{ text: "李5" }],startArr: [],endArr: [],count: 0};},components: {draggable},};</script><style lang="less" scoped>.test {border: 1px solid #ccc;}.ghostClass {opacity: 1;}.bottom {width: 100px;height: 50px;position: relative;background: blue;top: 2px;left: 2px;transition: all 0.5s linear;}</style>