vue拖拽排序库(SortableJS与vuedraggable)关系介绍对比, 用法, 及使用场景
实现 element tabel 拖拽排序 以及其他常用拖拽js库对比及使用场景
·
废话
关系对比介绍
vuedeaggable
官方地址
VueDraggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作
sortable
官网地址
官方地址2
从此可以看出 vuedeaggable是基于sortable.js二次封封装的一个js库, 二者本质上没啥区别, 一个针对于vue去使用的, 一个可以在其他地方更广泛的去使用,两个都是非常优秀的
用法
vuedraggable
1、安装
npm i -S vuedraggable
2、.vue 文件引入
import draggable from "vuedraggable";
components: { draggable },
3、简单的使用
template
<draggable
v-model="draggableList"
animation="300"
:options="{
sort: true
}"
dragClass="pointer"
>
<div v-for="(item, index) in draggableList" :key="index">
<div class="item">
<i
v-if="draggableTitle === '保存排序'"
class="el-icon-rank mr15 pointer"
></i>
{{ item.name }}
</div>
</div>
</draggable>
data
draggableTitle: "修改排序",
draggableList: [
{ id: 1, name: "11" },
{ id: 2, name: "22" },
{ id: 3, name: "33" },
{ id: 4, name: "44" },
{ id: 5, name: "55" }
],
methods
draggableClick() {
if (this.draggableTitle === "修改排序") {
this.draggableTitle = "保存排序";
} else {
this.$message.success("保存成功");
this.draggableTitle = "修改排序";
}
},
sortable
1、安装
npm install sortablejs --save
2、.vue文件引用
import Sortable from "sortablejs";
3、elementui tabel 使用
template
<div class="_table">
sortable使用
<el-button @click="sortableClick" size="small" class="ml50">{{
sortableTitle
}}</el-button>
</div>
<el-table
:data="tableData"
class="_table"
width="700"
stripe
border
:header-cell-style="{ backgroundColor: 'rgb(244, 244, 245)' }"
style="width: 100%"
>
<el-table-column width="50" v-if="sortableTitle === '保存排序'">
<template>
<i class="el-icon-rank pointer"></i>
</template>
</el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
data
sortableTitle: "修改排序",
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
methods
sortableClick() {
if (this.sortableTitle === "修改排序") {
this.setSort();
this.sortableTitle = "保存排序";
} else {
this.$message.success("保存成功");
this.sortableTitle = "修改排序";
}
},
// 拖拽操作
setSort() {
const el = document.querySelectorAll("._table tbody")[0];
if (el == undefined) {
return false;
}
console.log(el);
Sortable.create(el, {
sort: true, //是否可进行拖拽排序
animation: 150,
// Class name for the drop placeholder,
handle: ".pointer",
//拖拽结束执行,evt执向拖拽的参数
onEnd: ({ newIndex, oldIndex }) => {
console.log(newIndex, oldIndex);
}
});
}
至此结束,完整demo如下
<template>
<div class="second_page3">
<div class="vuedraggable">
<div class="_table">
vuedraggable使用
<el-button @click="draggableClick" size="small" class="ml50">{{
draggableTitle
}}</el-button>
</div>
<draggable
v-model="draggableList"
animation="300"
:options="{
sort: true
}"
dragClass="pointer"
>
<div v-for="(item, index) in draggableList" :key="index">
<div class="item">
<i
v-if="draggableTitle === '保存排序'"
class="el-icon-rank mr15 pointer"
></i>
{{ item.name }}
</div>
</div>
</draggable>
</div>
<div class="_table">
sortable使用
<el-button @click="sortableClick" size="small" class="ml50">{{
sortableTitle
}}</el-button>
</div>
<el-table
:data="tableData"
class="_table"
width="700"
stripe
border
:header-cell-style="{ backgroundColor: 'rgb(244, 244, 245)' }"
style="width: 100%"
>
<el-table-column width="50" v-if="sortableTitle === '保存排序'">
<template>
<i class="el-icon-rank pointer"></i>
</template>
</el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
components: { draggable },
data() {
return {
draggableTitle: "修改排序",
draggableList: [
{ id: 1, name: "11" },
{ id: 2, name: "22" },
{ id: 3, name: "33" },
{ id: 4, name: "44" },
{ id: 5, name: "55" }
],
sortableTitle: "修改排序",
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
draggableClick() {
if (this.draggableTitle === "修改排序") {
this.draggableTitle = "保存排序";
} else {
this.$message.success("保存成功");
this.draggableTitle = "修改排序";
}
},
sortableClick() {
if (this.sortableTitle === "修改排序") {
this.setSort();
this.sortableTitle = "保存排序";
} else {
this.$message.success("保存成功");
this.sortableTitle = "修改排序";
}
},
// 拖拽操作
setSort() {
const el = document.querySelectorAll("._table tbody")[0];
if (el == undefined) {
return false;
}
console.log(el);
Sortable.create(el, {
sort: true, //是否可进行拖拽排序
animation: 150,
// Class name for the drop placeholder,
handle: ".pointer",
//拖拽结束执行,evt执向拖拽的参数
onEnd: ({ newIndex, oldIndex }) => {
console.log(newIndex, oldIndex);
}
});
}
},
created() {}
};
</script>
<style lang="less" scoped>
.second_page3 {
.vuedraggable {
.item {
border-top: 5px solid #f6f8fc;
padding: 10px 20px;
}
}
.pointer {
cursor: pointer;
font-size: 18px;
padding: 0 5px;
}
}
</style>
使用场景
如果是 element ant 组件里的表格 拖拽排序 建议用Sortable, 其他简单的列表排序用vuedraggable
原因:
vuedraggable 使用是一个标签 包含你所要拖拽的内容list, 而element ant 这种ui框架,对 表格进行了封装,
draggable 无法准确的去包含到表格行(及tbody里的tr td)数据, 而Sortable是直接绑定一个dom,可以根据dom去绑定
笔记
具体更多使用方法请前往官方文档
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献13条内容
所有评论(0)