开发指南101-拖动排序
平台上实现拖动排序的尺度方案如下：依托组件：
SortableJS
界面元素:
<el-table :data="sortlist" ref="sortTable">
<el-table-column
label="名称"
header-align="center"
align="center"
prop="itemTitleEx"
width="200"
></el-table-column>
--其他列
<el-table-column align="center" label="排序" width="80">
<template slot-scope="scope">
<svg-icon class="drag-handler" icon-class="drag" />
</template>
</el-table-column>
</el-table>
用el-table展示数据，最后一列显示拖动图标。着实拖动图标只是起个提示作用。点击行内即可拖动。
核心处理：
this.oldsortData = this.sortlist.map(v => v.itemID);
this.newsortData = this.oldsortData.slice();
this.sortable = Sortable.create(el, {
animation: 300,
ghostClass: "sortable-ghost",
setData: function(dataTransfer) {
dataTransfer.setData("Text", "");
},
onEnd: evt => {
const tempIndex = this.newsortData.splice(evt.oldIndex, 1);
this.newsortData.splice(evt.newIndex, 0, tempIndex);
this.newsortDataString = this.newsortData.join();
}
});
newsortDataString为拖动后id的序列串，将这个串返回后台接口调整顺序即可
后台接口一般处理方案，就是生成一段批处理sql，就是按newsortDataString的id顺序举行赋值操纵，例如第一个赋值001，依次类推。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]