vueDraggable实现拖动改变顺序

vueDraggable实现拖动改变顺序

本文实例为大家分享了vue Draggable实现拖动改变顺序的具体代码,供大家参考,具体内容如下

1、npm install vuedraggable

2、import draggable from 'vuedraggable'

3、示例代码

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>

推荐阅读