vue-cli下使用vuedraggable拖拽排序

创建项目

1、命令行输入vue ui
2、浏览器中打开

3、在桌面创建项目ty
4、选中手动配置
5、配置路由和vuex

6、创建项目

安装vuedraggable

1、命令打开项目的根目录下
2、执行

npm install vuedraggable -S

或者

npm install vuedraggable -S

安装 成功

2、在vue组件中使用

1. 引用import draggable from ‘vuedraggable’
2. 注册组件components: { draggable }
3. 通过draggable标签来使用
4. 调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的

3、页面效果
拖拽元素

4、源码
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../App.vue'
import HelloWorld from '../components/HelloWorld.vue'
Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/',
    name: 'Home',
    component: Home,
    redirect: {
    
     name: 'HelloWorld' },
    children: [
      {
    
    
        path: '/HelloWorld',
        name: 'HelloWorld',
        component: HelloWorld
      }
    ]
  }
]

const router = new VueRouter({
    
    
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>

</style>

HelloWorld.vue

<template>
  <div class="hello">
    <!--3、使用拖拽组件-->
   <draggable  v-model="sectionList" @update="datadragEnd2($event,sectionList)" :options = "{animation:500}">
                         <div v-for="(node,i) in sectionList" :key="i" style="padding-left: 25px;border-bottom: 1px solid rgb(215, 215, 215);width: 80%" >
                           <span>{
   
   {i+1}}.</span>
                           <span>{
   
   {node.ccname}}</span>
                         </div>
    </draggable>
  </div>
</template>

<script>
/* 1.引用组件 */
import draggable from 'vuedraggable'
export default {
     
     
  name: 'HelloWorld',
  /* 2.注册组件 */
  components: {
     
      draggable },
  data () {
     
     
    return {
     
     
      sectionList: [
        {
     
      id: 1, ccname: '第一章' },
        {
     
      id: 2, ccname: '第二章' }
      ]
    }
  },
  mounted () {
     
     
    // 为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function (event) {
     
     
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
     
     
    // 小节拖拽排序
    async datadragEnd2 (evt, sectionList) {
     
     
      evt.preventDefault()
      console.log('拖动前的索引 :' + evt.oldIndex)
      console.log('拖动后的索引 :' + evt.newIndex)
      const newArr = await this.sectionList.map((item, i) => {
     
     
        return {
     
     
          id: item.id,
          sort: i + 1
        }
      })
      console.log('拖拽排序后的新数组：' + JSON.stringify(newArr))
    }
  }
}
</script>

<style scoped>
</style>