vue2中，使用sortablejs组件和vuedraggable实现拖拽排序功能
拖拽
·
vue2中，使用sortablejs组件和vuedraggable实现拖拽排序功能
1、基本介绍
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
npm官网：https://www.npmjs.com/package/sortablejs
api配置项：http://www.sortablejs.com/options.html
中文文档：https://www.itxst.com/sortablejs/neuinffi.html
github地址：https://github.com/SortableJS/Vue.Draggable
vuedraggable地址：https://github.com/SortableJS/Vue.Draggable
demo1:https://sortablejs.github.io/Vue.Draggable/#/table-example
demo2：https://david-desmaisons.github.io/draggable-example/
安装
yarn add vuedraggable
npm i -S vuedraggable
2、基础示例
示例
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
}
</script>
基础示例-div
<div id="itxst">
<div data-id="1">item 1</div>
<div data-id="2">item 2</div>
<div data-id="3">item 3</div>
</div>
<script>
//获取对象
var el = document.getElementById('itxst');
//设置配置
var ops = {
animation: 1000,
//拖动结束
onEnd: function (evt) {
console.log(evt);
//获取拖动后的排序
var arr = sortable.toArray();
alert(JSON.stringify(arr));
},};
//初始化
var sortable = Sortable.create(el, ops);
</script>
基础示例-表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sortable.js table表格拖拽例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
</head>
<body>
<table id="itxst">
<tbody>
<tr>
<td>1</td>
<td>www.baidu.com</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>www.itxst.com</td>
</tr>
</tbody>
</table>
<script>
//获取对象
var el = document.getElementById('itxst');
//设置配置
var ops = { animation: 1000 };
//初始化
var sortable = Sortable.create(el, ops);
</script>
</body>
</html>
3、应用实例
场景：需要对表格数据进行拖拽排序
1、安装
npm install sortablejs --save
2、引入
import Sortable from 'sortablejs'
3、使用
使用的vue + element
3.1、在 el-tabl 内添加ref，方便我们获取节点
<el-table ref="dragTable" :data="listdata" border style="width: 100%">
3.2、编写拖拽的方法
setSort() {
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]// 获取 tbody 节点
this.sortable = Sortable.create(el, {// 初始化顺便设置配置
ghostClass: 'sortable-ghost', // 停靠位置样式（要拖动的元素的样式，给拖动的元素添加类名，自己再css中设置样式）
setData: function(dataTransfer, dragEl) { // 避免 Firefox 的bug
dataTransfer.setData('Text', dragEl.textContent)
},
// 拖动结束的回调
onEnd: evt => {
let oldList = this.listdata[evt.oldIndex];// oldIndex旧的排序
let newList = this.listdata[evt.newIndex];// newIndex新的排序
// 需要传递的参数
this.sort = {
currId: oldList.id,
newId: newList.id,
currSort: oldList.sort,
newSort: newList.sort
}
this.$emit('sortList', this.sort)// 触发父元素的发送请求，顺便把参数传过去
}
})
}
3.3、监听排序变化，重新渲染
watch: {
listdata(){
console.log('ok')
this.oldList = this.listdata.map(v => v.id)
this.newList = this.oldList.slice()
this.$nextTick(() => {
this.setSort()
})
}
}
3.4、注册data
data(){
return {
sortable: null,
oldList: [],
newList: [],
sort: {
currId: 0,
newId: 0,
currSort: 0,
newSort: 0
}
}
},
注：拖拽排序的功能就完成了，但是需要注意：每个后端给的接口都不一样，你需要根据接口的返回参数以及需要的参数进行修改。
4、el-table后端排序实现
1、如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
<el-table @sort-change='tableSortChange'>
<el-table-column sortable='custom' prop="createTime" label="创建时间">
</el-table-column>
</el-table>
2、定义methods监听sort-change事件
tableSortChange(column) {
this.listQuery.pageNo = 1
if (column.order === 'descending') {
this.listQuery.sortby = column.prop
this.listQuery.order = 'desc'
} else {
this.listQuery.sortby = column.prop
this.listQuery.order = 'asc'
}
this.getList()
}
3、通过axios提交请求数据到后端
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
}
5、vue使用sortable实现拖拽排序完整版
vue项目中使用sortable实现对块元素拖拽进行排序
1、安装
npm install sortablejs --save
2、引入
import Sortable from 'sortablejs'
3、使用
<template>
<div class="flex" id="items">
<div class="item" v-for="(item,index) in value">
<p>{{item.name}}</p>
</div>
</div>
</template>
<style scope>
.item{
width: 100px;
height: 100px;
border: solid 1px #ccc;
}
.flex{
display: flex;
justify-content: space-around;
}
</style>
<script>
import Sortable from 'sortablejs'
export default {
name: 'operationsAdd',
data () {
return {
value: [
{ name: 11111 },
{ name: 22222 },
{ name: 33333 },
{ name: 44444 }
]
}
},
methods: {
test() {
var that = this
var el = document.getElementById('items')
// 常用
new Sortable(el, {
onEnd: function (evt) {
// 获取排序之后的data数据
that.value.splice(evt.newIndex, 0, that.value.splice(evt.oldIndex, 1)[0])
var newArray = that.value.slice(0)
that.value = []
that.$nextTick(function () {
that.value = newArray
console.log(that.value)
})
}
})
}
},
mounted () {
this.test()
}
}
</script>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献72条内容
所有评论(0)