实现效果

本来想在网上看看有没有基于antdesign做的，然后发现是真的少啊！废话不多说，先上图：

sortablejs介绍

首先先来认识一下这个插件: sortablejs
大家可以去细读一下它的api文档：

这边我就着重介绍一下我用到的api。
1.group可以传入对象，参数值为name,pull,put,
name:如果是要两个列表下进行拖动的话，name的值必须为一样；
pull:pull用来定义从这个列表容器移动出去的设置，true/false/‘clone'/function

• true :列表容器内的列表单元可以被移出；
• false：列表容器内的列表单元不可以被移出；
• clone：列表单元移出，移动的为该元素的副本；
• function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；

put:put用来定义往这个列表容器放置列表单元的的设置，true/false/[‘foo',‘bar']/function；

• true:列表容器可以从其他列表容器内放入列表单元；
• false：与true相反；
• [‘foo',‘bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值；
• function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；

2.animation ms, number 单位：ms，定义排序动画的时间；
3. handle: 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动（你想让哪个元素拖动就绑定这个元素的class）；
4. onStart:function(evt){}开始拖拽的回调方法；
5. onUpdate:function(evt){}列表内元素顺序更新的回调方法；
6. onAdd:function(evt){}元素从一个列表拖拽到另一个列表的回调方法；
7. onRemove:function(evt){} 元素从列表中移除进入另一个列表的回调方法；
这个需求用到这些api也就足够了。

具体实现

1.第一步先初始化sortable方法，因为我们的需求是两个表格拖拽，所以初始化2个方法。
html代码

<s-table
 ref="table"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>
  
<s-table
 class="sort-table"
 ref="table2"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>

具体的columns 和loadData就不多余阐述。

JS代码

import Sortable from 'sortablejs'
methods:{
 // 初始化 sortable 实现拖动
 initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 开始拖拽的时候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 initSortable1 () {
 var that = this
 var el = this.$el.querySelector('.left-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 开始拖拽的时候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 }

关于handle所取的class，因为我们是要对antdesign表格的每一行进行拖拽，所以要选取到他每一行的class。

至此两个table之间就可以实现拖拽效果，但仅仅只是拖拽效果。
因为这样拖拽之后，两边的数据源并没有发生变化，而且明明已经拖拽过来之后，另一边的表格的展示页会存在错误：

排序是我右边表格特有的，但是这边的表格是不需要这个排序的，而且如果拖拽成功的话为什么还会显示暂无数据呢，最后左边表头的CheckBox也无法选中。所以到此为止只是有拖拽效果而已。
2.在拖拽动作之后，把左右两边的数据源重新赋值，这里有两种实现思路：

• 每一次拖拽之后都去请求后台数据，拿到新的数据源之后重新赋值给表格，
• 前端自己做好数据源的处理，等所有的拖拽结束之后排好序再给后台保存。

考虑到性能消耗，我就选择了第二种：
1）定义左右两边的数据源数组

data(){
 return{
 unMatchedList: [], // 左边未匹配的数据
 dataList: [], // 右边已匹配的数据
 pullIndex ：''，//原数组拖拽元素的下标
 }
}

2)在每一次remove或者add的时候更新数据源，这里只写了一个表格拖拽的方法，另一个只要把that.dataList和that.unMatchedList左右两边的数据源赋值调换一下就行，就不贴重复代码了

 // 开始拖拽的时候
 onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: function (evt) {
 //evt.newIndex 移入到新数组的下标
 //pullIndex 原数组拖拽元素的下标
  that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  //通知table视图更新
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		 that.$refs.table && this.$refs.table.refresh(true)
  })
 },
 onRemove: function (evt) {
  that.dataList.splice(evt.oldIndex, 1)
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		that.$refs.table && this.$refs.table.refresh(true)
  })
 }
 })

3）实现同一个表格上下拖拽排序

initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 //这里千万不要用onEnd 方法
 onUpdate: function (evt) {
  var o = evt.oldIndex
  var n = evt.newIndex
  if (o === n) {
  return
  }
  that.sortListAndUpdate(that.dataList, o, n)
 },
 })
 },
 // 对数据进行排序，要求 o（oldIndex） 和 n（newIndex） 从 0开始
 sortList (list, o, n) {
 var newTableData = JSON.parse(JSON.stringify(list))
 var data = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, data[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 return newTableData
 },
 /**
 * 对数据排序并更新 table， 要求 o（oldIndex） 和 n（newIndex） 从 0开始
 */
 sortListAndUpdate (list, o, n) {
 var newTableData = this.sortList(list, o, n)
 newTableData.forEach((item, index) => {
 item.sort = index + 1
 })
 this.$nextTick(() => {
 this.dataList = newTableData
 that.$refs.table2 && this.$refs.table2.refresh(true)
 })
 },

这边我们选用onUpdate方法来排序，不要用onEnd方法，因为只要你有拖拽效果，都会去触发onEnd方法，导致左右拖拽完后又会触发一次排序。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 使用mysql-libmysqlclient报错该怎么办

  因为要用到mysql-libmysqlclient模块，所以运行以下的命令进行安装npminstallmysql-libmysqlclient报错如下： 这是因为对Mysql的一些环境变量的目录没有配置好。先安装Mysql，Mac如何安装这里不细说，Mysql的官网有专门的Mac的dmg包下载，去官网下载，然后用鼠标戳几下就好了然后把Mysql的bin目录添加到PATH的环

• JS中实现鼠标拖拽效果用到哪些函数，代码是什么

  这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS事件的冒泡是什么意思，阻止冒泡事件怎样做

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了JavaScript事件的冒泡、委派、绑定和传播的相关问题，包括了冒泡事件、委派事件、通过addEventListener()绑定事件等等内容，下面一起来看一下，希望对大家有帮助。

• vue中v-model指令的基础用法是怎样，有哪些应用

  通过前面的学习，我们可以顺利的在Vue中将数据源渲染到HTML的DOM元素中，但很多时候我们希望能控制数据源。也就是数据绑定，并且与其通讯。简单的说，怎么在Vue中实现数据的双向绑

• 什么是vue的diff算法？有何作用？

  这篇文章给大家详细的介绍vue的diff算法，对很多新手来说vue的diff算法是比较难理解的内容，下面小编就分享一些实例，对大家学习vue的diff算法有一定的帮助，接下来一起跟随小编看看吧。