vue-cli下使用vuedraggable拖拽排序

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>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页