引入Bootstrap导致带margin的draggable元素相对位置偏移

问题场景 #

基于自定义拖拽实现代码（规避HTML5 draggable 属性的限制），在引入Bootstrap且父元素.group.card设置margin时，拖拽任意.draggable元素会出现向右下方偏移的现象；移除Bootstrap或父元素的margin后，拖拽恢复正常。

问题原因 #

1. 坐标参考系不统一：
   • 代码中offsetLeft/offsetTop是元素相对于父定位元素的偏移量，而e.pageX/e.pageY是鼠标相对于整个文档视口的坐标。
   • 当父元素设置margin-left/margin-top时，元素在视口中的实际位置 = 父元素margin值 + offsetLeft/offsetTop，但代码仅用offsetLeft/offsetTop计算偏移，导致e.pageX - offsetX的差值被父元素margin抵消，产生偏移。
2. Bootstrap的card类额外添加的默认样式（如内边距）进一步放大了坐标计算误差。

解决方法 #

统一坐标参考系，使用元素相对于文档视口的绝对位置计算偏移，替换原有的相对父元素的offset值。修改后的JavaScript代码如下：

(function() {
    let targets = document.querySelectorAll('.draggable');
    let offsetX;
    let offsetY;
    Array.prototype.map.call(targets, (target) => {
        target.isMouseDown = false;
        target.addEventListener('mousedown', (e) => {
            if (e.buttons === 1) {
                target.style.zIndex = 10000
                target.style.position = 'relative';
                target.isMouseDown = true;
                // 获取元素在视口中的绝对位置
                const rect = target.getBoundingClientRect();
                // 计算鼠标与元素的偏移（适配页面滚动）
                offsetX = e.pageX - rect.left - window.scrollX;
                offsetY = e.pageY - rect.top - window.scrollY;
            }
        });
        document.addEventListener('mouseup', (e) => {
            e.preventDefault();
            target.style.zIndex = null
            target.isMouseDown = false;
            target.style.left = 0 + 'px';
            target.style.top = 0 + 'px';
        });
        document.addEventListener('mousemove', (e) => {
            e.preventDefault();
            if (target.isMouseDown) {
                target.style.left = e.pageX - offsetX + 'px';
                target.style.top = e.pageY - offsetY + 'px';
            }
        });
    });
})();

核心修改说明 #

• 用getBoundingClientRect()获取元素在视口中的精确位置，替代依赖父元素的offsetLeft/offsetTop。
• 计算offsetX/offsetY时，直接基于pageX/pageY与元素视口位置的差值，同时考虑页面滚动偏移，确保坐标参考系完全统一。

这样无论父元素是否设置margin、页面是否滚动，拖拽时元素都会精准跟随鼠标，不会出现偏移。

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