这篇文章给大家分享的是有关jQuery如何实现表格的数据拖拽的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

需求

1、ant-design-vue
2、将一个嵌套在drawer中的table数据拖拽复制到drawer外面的table中

效果

拖拽中

拖拽后

HTML

<el-buttontype="text"size="small"class="text-btn"@click="choseField">选择字段</el-button>//拖拽到table<a-tableclass="droptable":columns="columns_copy":dataSource="fieldInfoList">.....</a-table>//从drawer中拖拽数据<field-selectref="fieldList"@setFieldList="setFieldList"></field-select>

JS

initDrop(){//initDrop在mounted中触发，使table区域可以接受拖拽letthat=this$('.table_container').droppable({scope:'basic',//设置两个相同的scope接受拖拽信息tolerance:'fit',drop(e){letdropFieldInfo={enName:that.dragField.enname||'',cnName:that.dragField.name||'',}that.fieldInfoList.push(dropFieldInfo)that.repeatZhName()//校验字段是否重复的方法}})},choseField(){this.$refs.fieldList.setShowState(true)//显示drawer//因为drawer中的dom对象实在打开抽屉时候才会被创建，所以不能再drawer组件中进行初始化this.$nextTick(()=>{//sort-table为抽屉组件中ant-table的类名$('.sort-tabletbodytr').draggable({scope:'basic',//相同的scopenamescroll:false,zIndex:10000,//zindex设置更高避免拖拽的数据被drawer遮住，同时去除遮罩层样式helper:'clone',appendTo:'body',//避免遮盖containment:document.getElementById('app'),start:e=>{//rowIndex第一行是表头，数据行的rowindex从1开始letcurrentIndex=e.target.rowIndex-1//console.log(this.$refs.fieldList.tableData[currentIndex])this.dragField=this.$refs.fieldList.tableData[currentIndex]},stop:e=>{//this.eventType='CLICK'console.log('拖拽结束事件')console.log(e)}})})},

注意事项

1、drop和drag区域要配置相同的scope
2、为了避免拖拽的helper被遮住，drag要配置zIndex和appendTo
3、如果表格有翻页或者查询功能，列表数据会刷新，jq的拖拽会失效，在getList请求方法成功之后，在初始化一次拖拽事件即可，然后使用$emit让父组件接收一下

感谢各位的阅读！关于“jQuery如何实现表格的数据拖拽”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！