这篇文章给大家分享的是有关jQuery如何实现表格的数据拖拽的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
具体内容如下
1、ant-design-vue
2、将一个嵌套在drawer中的table数据拖拽复制到drawer外面的table中
拖拽中
拖拽后
HTML
计算
安全
数据库
网络和加速
企业服务
<el-button type="text" size="small" class="text-btn" @click="choseField">选择字段</el-button>
// 拖拽到table
<a-table class="droptable" :columns="columns_copy" :dataSource="fieldInfoList">
.....
</a-table>
// 从drawer中拖拽数据
<field-select ref="fieldList" @setFieldList="setFieldList"></field-select>JS
initDrop() {
// initDrop在mounted中触发，使table区域可以接受拖拽
let that = this
$('.table_container').droppable({
scope: 'basic', // 设置两个相同的scope接受拖拽信息
tolerance: 'fit',
drop(e) {
let dropFieldInfo = {
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-table tbody tr').draggable({
scope: 'basic', //相同的scope name
scroll: false,
zIndex: 10000, // zindex设置更高避免拖拽的数据被drawer遮住，同时去除遮罩层样式
helper: 'clone',
appendTo: 'body', //避免遮盖
containment: document.getElementById('app'),
start: e => {
// rowIndex第一行是表头，数据行的rowindex从1开始
let currentIndex = 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如何实现表格的数据拖拽”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
