sortable.js 官網(wǎng)
拖放排序插件Sortable.js中文介紹
1. 安裝 npm 或 yarn 安裝
yarn add -D sortablejs
2. 使用
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" style="width: 100%" :row-class-name="disabledDrag">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</template>
</div>
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小跳',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小跳',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
},
methods: {
// 給表格添加 disableDrag 類
disabledDrag({row}) {
if (row.name === '王小跳') {
return 'disabled-drag';
} else {
return '';
}
}
},
mounted() {
const selector = '.el-table__body-wrapper > table > tbody';
const el = document.querySelectorAll(selector)[0];
Sortable.create(el, {
onMove: evt => {
const {dragged, related} = evt;
console.log(dragged, related); // 拿到拖動(dòng)元素和交換位置的相關(guān)元素婉称，可做一些操作矮锈，比如某些條件下禁止拖動(dòng)排序
},
onEnd: evt => {
// 拖動(dòng)結(jié)束
},
filter: '.disabled-drag'
});
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("http://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
.el-table {
.disabled-drag {
color: #909399;
}
}
效果：
jsfiddle 在線演示
3. 小結(jié)
事件：
onChoose：function 列表單元被選中的回調(diào)函數(shù)
onStart：function 列表單元拖動(dòng)開始的回調(diào)函數(shù)
onEnd：function 列表單元拖放結(jié)束后的回調(diào)函數(shù)
onAdd：function 列表單元添加到本列表容器的回調(diào)函數(shù)
onUpdate：function 列表單元在列表容器中的排序發(fā)生變化后的回調(diào)函數(shù)
onRemove：function 列表元素移到另一個(gè)列表容器的回調(diào)函數(shù)
onFilter：function 試圖選中一個(gè)被filter過濾的列表單元的回調(diào)函數(shù)
onMove：function 當(dāng)移動(dòng)列表單元在一個(gè)列表容器中或者多個(gè)列表容器中的回調(diào)函數(shù)
onClone：function 當(dāng)創(chuàng)建一個(gè)列表單元副本的時(shí)候的回調(diào)函數(shù)
事件對(duì)象：
to：HTMLElement--移動(dòng)到列表容器
from：HTMLElement--來源的列表容器
item：HTMLElement--被移動(dòng)的列表單元
clone：HTMLElement--副本的列表單元
oldIndex：number/undefined--在列表容器中的原序號(hào)
newIndex：number/undefined--在列表容器中的新序號(hào)
方法
option(name[,value])
獲得或者設(shè)置項(xiàng)參數(shù)铐伴，使用方法類似于jQuery用法诗赌，沒有第二個(gè)參數(shù)為獲得option中第一個(gè)參數(shù)所對(duì)應(yīng)的值鲁僚，有第二個(gè)參數(shù)時(shí)曼月，將重新賦給第一個(gè)參數(shù)所對(duì)應(yīng)的值悬包；
toArray()
序列化可排序的列表單元的data-id（可通過配置項(xiàng)中dataIdAttr修改）放入一個(gè)數(shù)組衙猪，并返回這個(gè)數(shù)組中
sort()
通過自定義列表單元的data-id的數(shù)組對(duì)列表單元進(jìn)行排序
save()
destroy()
