如何用jQuery定位多ID表格，复用行拖拽功能

要让页面中多个不同ID的表格共用这套行拖拽逻辑，核心是把原来绑定单个表格的全局逻辑改成可复用的实例化逻辑，用jQuery批量选中目标表格后，给每个表格单独初始化拖拽功能，同时避免全局变量导致的多表格状态冲突。具体改造步骤如下：

第一步：给所有需要拖拽的表格加统一标识 #

先给页面中7个表格都加上同一个class，比如draggable-table，这样jQuery可以一次性选中所有目标表格：

<table id="table1" class="draggable-table">...</table>
<table id="table2" class="draggable-table">...</table>
<!-- 其他5个表格同理 -->

第二步：改造原生JS代码为可复用的工厂函数 #

把原来的全局变量和函数封装成一个工厂函数，每个表格实例维护自己的拖拽状态，避免多个表格互相干扰：

"use strict";

// 封装拖拽逻辑为工厂函数，接收单个表格元素作为参数
function createTableDragHandler(tableElem) {
    const table = tableElem;
    const tbody = table.querySelector('tbody');

    // 每个表格单独维护自己的拖拽状态变量，不再用全局变量
    let currRow = null,
        dragElem = null,
        mouseDownX = 0,
        mouseDownY = 0,
        mouseX = 0,
        mouseY = 0,
        mouseDrag = false;

    function bindMouse() {
        // 给document绑定事件，但在事件处理中判断目标是否属于当前表格
        document.addEventListener('mousedown', (event) => {
            if (event.button !== 0) return;

            let targetRow = getTargetRow(event.target);
            // 只处理当前表格内的行
            if (targetRow && tbody.contains(targetRow)) {
                currRow = targetRow;
                addDraggableRow(targetRow);
                currRow.classList.add('is-dragging');

                const coords = getMouseCoords(event);
                mouseDownX = coords.x;
                mouseDownY = coords.y;

                mouseDrag = true;
            }
        });

        document.addEventListener('mousemove', (event) => {
            if (!mouseDrag) return;

            const coords = getMouseCoords(event);
            mouseX = coords.x - mouseDownX;
            mouseY = coords.y - mouseDownY;

            moveRow(mouseX, mouseY);
        });

        document.addEventListener('mouseup', (event) => {
            if (!mouseDrag) return;

            currRow.classList.remove('is-dragging');
            if (dragElem && table.contains(dragElem)) {
                table.removeChild(dragElem);
            }

            dragElem = null;
            mouseDrag = false;
        });
    }

    function swapRow(row, index) {
        const currIndex = Array.from(tbody.children).indexOf(currRow);
        const row1 = currIndex > index ? currRow : row;
        const row2 = currIndex > index ? row : currRow;

        tbody.insertBefore(row1, row2);
    }

    function moveRow(x, y) {
        dragElem.style.transform = `translate3d(${x}px, ${y}px, 0)`;

        const dPos = dragElem.getBoundingClientRect();
        const currStartY = dPos.y, currEndY = currStartY + dPos.height;
        const rows = getRows();

        for (let i = 0; i < rows.length; i++) {
            const rowElem = rows[i];
            const rowSize = rowElem.getBoundingClientRect();
            const rowStartY = rowSize.y, rowEndY = rowStartY + rowSize.height;

            if (currRow !== rowElem && isIntersecting(currStartY, currEndY, rowStartY, rowEndY)) {
                if (Math.abs(currStartY - rowStartY) < rowSize.height / 2) {
                    swapRow(rowElem, i);
                }
            }
        }
    }

    function addDraggableRow(target) {
        dragElem = target.cloneNode(true);
        dragElem.classList.add('draggable-table__drag');
        dragElem.style.height = getStyle(target, 'height');
        dragElem.style.background = getStyle(target, 'backgroundColor');
        
        for (let i = 0; i < target.children.length; i++) {
            const oldTD = target.children[i];
            const newTD = dragElem.children[i];
            newTD.style.width = getStyle(oldTD, 'width');
            newTD.style.height = getStyle(oldTD, 'height');
            newTD.style.padding = getStyle(oldTD, 'padding');
            newTD.style.margin = getStyle(oldTD, 'margin');
        }
        
        table.appendChild(dragElem);
        const tPos = target.getBoundingClientRect();
        const dPos = dragElem.getBoundingClientRect();
        dragElem.style.bottom = `${(dPos.y - tPos.y) - tPos.height}px`;
        dragElem.style.left = "-1px";

        document.dispatchEvent(new MouseEvent('mousemove', {
            view: window,
            cancelable: true,
            bubbles: true
        }));
    }

    function getRows() {
        return table.querySelectorAll('tbody tr');
    }

    function getTargetRow(target) {
        const elemName = target.tagName.toLowerCase();
        if (elemName === 'tr') return target;
        if (elemName === 'td') return target.closest('tr');
        return null;
    }

    function getMouseCoords(event) {
        return {
            x: event.clientX,
            y: event.clientY
        };
    }

    function getStyle(target, styleName) {
        const compStyle = getComputedStyle(target);
        return compStyle[styleName] || null;
    }

    function isIntersecting(min0, max0, min1, max1) {
        return Math.max(min0, max0) >= Math.min(min1, max1) &&
               Math.min(min0, max0) <= Math.max(min1, max1);
    }

    // 初始化当前表格的拖拽事件
    bindMouse();
}

// 用jQuery选中所有带draggable-table类的表格，逐个初始化拖拽逻辑
$(document).ready(function() {
    $('.draggable-table').each(function() {
        createTableDragHandler(this);
    });
});

关键改动说明 #

• 状态隔离：把原来的全局拖拽变量（如currRow、mouseDrag）放到工厂函数内部，每个表格实例拥有独立的状态，避免多表格操作时互相干扰。
• 目标校验：在mousedown事件中增加判断，只处理当前表格内的行，防止拖拽一个表格的行影响其他表格。
• jQuery批量初始化：利用jQuery的each()方法遍历所有目标表格，给每个表格单独调用拖拽初始化函数。

内容的提问来源于stack exchange，提问作者Jyoti