jQuery如何實現表格的數據拖拽

這篇文章給大家分享的是有關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如何實現表格的數據拖拽”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！