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组件中使用
- 引用import draggable from ‘vuedraggable’
- 注册组件components: { draggable }
- 通过draggable标签来使用
- 调用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>