效果：

要點：

• 安裝

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>

總結

以上是生活随笔為你收集整理的vuedraggable示例_vue拖拽列表vuedraggable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。