jQuery實(shí)現(xiàn)表格的數(shù)據(jù)拖拽

更新時(shí)間：2022年02月22日 11:53:46 作者：喝咖啡還是泡茶

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格的數(shù)據(jù)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jQuery實(shí)現(xiàn)將一個(gè)ant-table的數(shù)據(jù)拖拽復(fù)制到另一個(gè)ant-table，供大家參考，具體內(nèi)容如下

需求

1、ant-design-vue
2、將一個(gè)嵌套在drawer中的table數(shù)據(jù)拖拽復(fù)制到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中拖拽數(shù)據(jù)
<field-select ref="fieldList" @setFieldList="setFieldList"></field-select>

initDrop() {
?? ??? ??? ?// initDrop在mounted中觸發(fā)，使table區(qū)域可以接受拖拽?
? ? ? ? ? ? let that = this
? ? ? ? ? ? $('.table_container').droppable({
? ? ? ? ? ? ? ? scope: 'basic', // 設(shè)置兩個(gè)相同的scope接受拖拽信息
? ? ? ? ? ? ? ? tolerance: 'fit',
? ? ? ? ? ? ? ? drop(e) {
? ? ? ? ? ? ? ? ? ? let dropFieldInfo = {
? ? ? ? ? ? ? ? ? ? ? ? enName: that.dragField.enname || '',
? ? ? ? ? ? ? ? ? ? ? ? cnName: that.dragField.name || '',
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? that.fieldInfoList.push(dropFieldInfo)
? ? ? ? ? ? ? ? ? ? that.repeatZhName() // 校驗(yàn)字段是否重復(fù)的方法
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? },
?choseField() {
? ? ? ? ? ? this.$refs.fieldList.setShowState(true) ?//顯示drawer
? ? ? ? ? ? // 因?yàn)閐rawer中的dom對(duì)象實(shí)在打開(kāi)抽屜時(shí)候才會(huì)被創(chuàng)建，所以不能再drawer組件中進(jìn)行初始化
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ?? ?// sort-table為抽屜組件中ant-table的類(lèi)名
? ? ? ? ? ? ? ? $('.sort-table tbody tr').draggable({
? ? ? ? ? ? ? ? ? ? scope: 'basic', ?//相同的scope name
? ? ? ? ? ? ? ? ? ? scroll: false,
? ? ? ? ? ? ? ? ? ? zIndex: 10000, ?// zindex設(shè)置更高避免拖拽的數(shù)據(jù)被drawer遮住，同時(shí)去除遮罩層樣式
? ? ? ? ? ? ? ? ? ? helper: 'clone',
? ? ? ? ? ? ? ? ? ? appendTo: 'body', ?//避免遮蓋
? ? ? ? ? ? ? ? ? ? containment: document.getElementById('app'),
? ? ? ? ? ? ? ? ? ? start: e => {
? ? ? ? ? ? ? ? ? ? ?? ?// rowIndex第一行是表頭，數(shù)據(jù)行的rowindex從1開(kāi)始
? ? ? ? ? ? ? ? ? ? ? ? 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('拖拽結(jié)束事件')
? ? ? ? ? ? ? ? ? ? ? ? console.log(e)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? },

注意事項(xiàng)

1、drop和drag區(qū)域要配置相同的scope
2、為了避免拖拽的helper被遮住，drag要配置zIndex和appendTo
3、如果表格有翻頁(yè)或者查詢(xún)功能，列表數(shù)據(jù)會(huì)刷新，jq的拖拽會(huì)失效，在getList請(qǐng)求方法成功之后，在初始化一次拖拽事件即可，然后使用$emit讓父組件接收一下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: