npm install vuedraggable

import draggable from 'vuedraggable'

示例代碼

Test.vue

<template><ul class="sort-ul"><div>45454</div><draggable group="article" :value="sortArr" @input="handleListChange($event)"><li v-for="(item,index) in sortArr" :key="index"><h2>{{item.title}}</h2></li></draggable></ul> </template> <script> import Draggable from 'vuedraggable';export default {name: 'Test',props:{},data () {return {fileList: [],sortArr:[{title:"00"},{title:"01"},{title:"02"},{title:"03"},{title:"04"},{title:"05"},{title:"06"},{title:"07"},{title:"08"},{title:"09"},],}},components: {Draggable, },methods: {// 更新位置handleListChange(event){console.log(event);this.sortArr = event;}},mounted () {} } </script> <style>ul{padding: 0;width: 400px;}li{width: 100px;float:left;}</style>

main.js

import Vue from 'vue' import App from './App' Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',components: { App },template: '<App/>' })

app.vue

<template><div id="app"><Test /></div> </template><script>import Test from '@/components/Test.vue'export default {name: 'App',components:{Test,},methods: {} } </script>

總結

以上是生活随笔為你收集整理的vue Draggable实现拖动改变顺序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。