关于table元素，自定义拖拽的实现

关于table表格自定义实现，行元素拖拽功能进行排序的实现

这个是基于antd-vue（vue3）来进行实现的

活不多说直接上代码

 <a-table
	:scroll="{y:500}"
	:customRow="customRow"    // customRow 该方法就是实现拖拽排序
     @row-drag-end="onRowDragEnd"
    :pagination="false"
    :columns="columns"
    :data-source="state.lableList"
    rowKey="id"
    class="components-table-demo-nested"
  >
    <template #bodyCell="{ column, record,index }">
        <template v-if="column.dataIndex == 'index'">
           <span>{{index + 1 }}</span>
        </template>
    </template>			
 </a-table>

最关键的就是   customRow  其余的不用在意

然后下面就是这个方法的具体实现

	// 拖拽实现
			const customRow = (record, index) => {
				return {
					style: {
						cursor: 'grab'
					},
					// 鼠标移入
					onMouseenter: (event) => {
						// 兼容IE
						var ev = event || window.event
						ev.target.draggable = true
					},
					// 开始拖拽
					onDragstart: (event) => {
						// 兼容IE
						var ev = event || window.event
						// 阻止冒泡
						ev.stopPropagation()
						// 得到源目标数据
						state.sourceObj = record
					},
					// 拖动元素经过的元素
					onDragover: (event) => {
						// 兼容 IE
						var ev = event || window.event
						ev.preventDefault()
					},
					// 鼠标松开
					onDrop: (event) => {
						// 兼容IE
						var ev = event || window.event
						// 阻止冒泡
						ev.stopPropagation()
						// 得到目标数据
						state.targetObj = record
						console.log('源数据', state.sourceObj)
						console.log('目标数据', state.targetObj)
						const newArr = state.lableList
						const source = newArr.findIndex((item) => item.id ==  state.sourceObj.id)
						const target = newArr.findIndex((item) => item.id ==  state.targetObj.id)
						newArr.splice(source, 1)
						newArr.splice(target, 0,  state.sourceObj)
						//松开鼠标后，清除底部拖拽样式
					},
					//鼠标移出
					onMouseleave: (event) => {
						// 兼容IE
						var ev = event || window.event
						//鼠标移出拖拽范围禁止拖拽并清除拖拽效果
						ev.target.draggable = false
					}
				}
			}

根据对应的鼠标操作事件，来执行不同的逻辑，其中onDrop事件执行完成之后，就可以拿到对应的排序之后的数据，然后根据源数据和对应的目标数据来进行对应的排序功能

但是有一个限制条件就是，只能对本页数据进行排序，无法将其它页数据，保留拖拽状态，然后回到上一页进行排序替换