如何在鼠标松开时获取td、div标签ID及拖动扩展时触发ID提示

我来帮你搞定这个需求——当第一列里的可扩展div覆盖到右侧单元格时，弹出提示显示右侧单元格ID和当前div的ID。咱们先分析原代码的问题，再给出修改后的实现：

核心问题分析 #

原代码实现了div的拖动和宽度调整，但缺少对div位置与右侧单元格重叠的检测逻辑。我们需要在调整宽度结束后，判断当前div是否延伸到了右侧单元格，然后获取对应的ID信息。

修改后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.8.3.js"></script>
    <style>
        tr { height: 50px; }
        td { position: relative; border:1px solid #ccc; }
        .popup {
            z-index: 9;
            background-color: #f1f1f1;
            border: 1px solid #d3d3d3;
            text-align: center;
            position: absolute;
            overflow: auto;
            width:100%;
            height:100%;
        }
        .popup-header_No {
            z-index: 10;
            background-color: #2196f3;
            color: #fff;
            padding:5px;
            cursor:move;
        }
        .popup .resizer-right {
            width: 5px;
            height: 100%;
            background: rgba(0,0,0,0.1);
            position: absolute;
            right: 0;
            bottom: 0;
            cursor: e-resize;
        }
        .popup * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body>
    <table border="1" style="width:100%">
        <tr>
            <td id="R1Date1" class="mybox">
                <div class="popup" id='Book1'>
                    <div class="popup-header_No">Click here to move</div>
                </div>
            </td>
            <td id='R1Date2'>右侧单元格1</td>
        </tr>
        <tr>
            <td id="R2Date1">
                <div class="popup" id='Book2'>
                    <div class="popup-header_No">Click here to move</div>
                </div>
            </td>
            <td id="R2Date2">右侧单元格2</td>
        </tr>
    </table>

    <script>
        window.onload = function() {
            initDragElement();
            initResizeElement();
        };

        function initDragElement() {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            var popups = document.getElementsByClassName("popup");
            var elmnt = null;
            var currentZIndex = 100;

            for (var i = 0; i < popups.length; i++) {
                var popup = popups[i];
                var header = popup.querySelector(".popup-header_No");
                popup.onmousedown = function() {
                    this.style.zIndex = "" + ++currentZIndex;
                };
                if (header) {
                    header.parentPopup = popup;
                    header.onmousedown = dragMouseDown;
                }
            }

            function dragMouseDown(e) {
                elmnt = this.parentPopup;
                elmnt.style.zIndex = "" + ++currentZIndex;
                e = e || window.event;
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                if (!elmnt) return;
                e = e || window.event;
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        function initResizeElement() {
            var popups = document.getElementsByClassName("popup");
            var element = null;
            var startX, startWidth;

            for (var i = 0; i < popups.length; i++) {
                var p = popups[i];
                var right = document.createElement("div");
                right.className = "resizer-right";
                p.appendChild(right);
                right.parentPopup = p;
                right.addEventListener("mousedown", initDrag, false);
            }

            function initDrag(e) {
                element = this.parentPopup;
                startX = e.clientX;
                startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
                document.documentElement.addEventListener("mousemove", doDrag, false);
                document.documentElement.addEventListener("mouseup", stopDrag, false);
                e.preventDefault();
            }

            function doDrag(e) {
                element.style.width = (startWidth + e.clientX - startX) + "px";
            }

            function stopDrag(e) {
                document.documentElement.removeEventListener("mousemove", doDrag, false);
                document.documentElement.removeEventListener("mouseup", stopDrag, false);
                
                // 核心检测逻辑：判断是否覆盖右侧单元格
                var popup = element;
                var parentTd = popup.parentElement;
                var currentTr = parentTd.parentElement;
                var nextTd = currentTr.cells[parentTd.cellIndex + 1]; // 获取右侧单元格

                if (nextTd) {
                    // 获取元素的绝对位置
                    var popupRect = popup.getBoundingClientRect();
                    var nextTdRect = nextTd.getBoundingClientRect();

                    // 判断popup的右边界是否进入了右侧单元格的区域
                    if (popupRect.right > nextTdRect.left) {
                        alert(`右侧单元格ID：${nextTd.id}\n当前Div ID：${popup.id}`);
                    }
                }
            }
        }
    </script>
</body>
</html>

关键修改点说明 #

1. 添加重叠检测逻辑：在stopDrag函数中，我们：

   • 获取当前popup的父单元格parentTd，再找到所在行的右侧单元格nextTd
   • 使用getBoundingClientRect()获取popup和右侧单元格的绝对位置
   • 比较popup的右边界和右侧单元格的左边界，判断是否重叠

2. 简化冗余代码：移除了原代码中不需要的底部和右下角调整手柄（如果需要可以再加回来），同时整理了拖动逻辑中的冗余部分。

3. 样式优化：给resizer-right添加了半透明背景，方便用户识别调整手柄，同时确保popup初始大小和单元格一致。

这样调整后，当你拖动右侧手柄扩展Book1的宽度，使其覆盖到R1Date2单元格时，松开鼠标就会弹出包含两个ID的提示框啦！

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