Javascript 拖放div元素在元素1上运行良好，但在元素2上运行不佳

我创建了一个简单的代码，可以拖放两个div元素，但在

div1

上效果很好，但

div2

效果不好。
鼠标光标未正确位于

div 2

上

请检查问题底部的在线演示链接

HTML

<div class="draggable"></div>
<div class="draggable"></div>

JavaScript

var element = null;
var elemPosL = 0;
var elemPosT = 0;
var isMouseDown = false;

document.onmousedown = function(e) {
    element = e.target;
    if (element.className === "draggable") {
        elemPosL = e.clientX - element.offsetLeft;
        elemPosT = e.clientY - element.offsetTop;
        isMouseDown = true;
    }
};

document.onmousemove = function(e) {
    if (isMouseDown) {
        element.style.left = e.clientX - elemPosL + "px";
        element.style.top = e.clientY - elemPosT + "px";
    }
};


document.onmouseup = function() {
    isMouseDown = false;
    element = null;
};

---

使用

位置：绝对修复它

如果您想要相对的，请检查

var element = null;
var elemPosL = 0;
var elemPosT = 0;
var isMouseDown = false;

document.onmousedown = function(e) {
    element = e.target;
    if (element.className === "draggable") {
        elemPosL = e.clientX - element.offsetLeft;
        elemPosT = e.clientY - element.offsetTop;
        isMouseDown = true;
    }
};

document.onmousemove = function(e) {
    if (isMouseDown) {
        element.style.left = e.clientX - elemPosL + "px";
        element.style.top = e.clientY - elemPosT + "px";
    }
};


document.onmouseup = function() {
    isMouseDown = false;
    element = null;
};