vue拖拽排序,橫排豎排都行
阿新 • • 發佈:2022-03-09
首先要用什麼外掛還是得先下載
npm install vuedraggable
然後再用的地方引入
import draggable from 'vuedraggable'
註冊元件
components: {
//呼叫元件
draggable,
},
在附一個參考網址(我這只是本人筆記使用,專業還是看這個網址)
https://juejin.cn/post/6844904150350692366
廢話不多說,直接上程式碼
<template> <div> <button @click="addL">新增</button> <!-- 呼叫元件 --> <draggable class="Cul" element="ul" :list="list" :animation='200'> <transition-group> <li class="Cli list-group-item" v-for="item in list" :key="item.id">{{item.name}}</li> </transition-group> </draggable> <!-- 輸出 list 資料 --> {{list}} </div> </template> <script> // 引入拖拽元件 import draggable from 'vuedraggable' import url from "../../common/api"; export default { name: 'demo', components: { //呼叫元件 draggable, }, data () { return { list:[ { id: 1, name: '1' }, { id: 2, name: '2' }, { id: 3, name: '3' }, { id: 4, name: '4' }, { id: 5, name: '5' }, { id: 6, name: '6' }, { id: 7, name: '7' }, { id: 8, name: '8' }, ] } }, methods:{ addL(){ this.list.push({ id:new Date().getTime(), name:9 }) }, } } </script> <style lang="stylus" scoped> .Cul{ background #f00 width 500px } .Cli{ background #00f display inline-block width 50px margin 16px color #fff } </style>