在回答 1 的评论中提供的额外信息之后,解决此问题的方法(我知道)是放弃 html 本机拖放支持,而不是自己实现它。
我忘记了导致旧浏览器(尤其是 IE)出现问题的原因是什么,尽管我感觉要么是 onTgtMouseDown 的事件变量,要么是 clientX/scrollLeft。
无论如何,下面的代码是用当前的 Chrome 和 IE9 测试的。
希望它适合您的目的(它在视觉上定位对象,但不会改变节点在 DOM 树中的位置)
<!DOCTYPE html>
<html>
<head>
<style>
#tgt
{
position: absolute;
border: solid 1px red;
text-align: center;
display: inline-block;
}
</style>
<script>
function byId(e){return document.getElementById(e);}
function myInit()
{
var dragMe = byId('tgt');
dragMe.ondragstart = function() { return false; }
dragMe.onmousedown = onTgtMouseDown;
}
function onTgtMouseDown(e)
{
var mDlg, self=this;
var initMx, intMy, initDlgX, initDlgY, dx, dy;
var mTgt;
mTgt = this;
// mDlg = this.parentNode;
// mDlg.zIndex = 1000;
// mDlg.style.position = 'absolute';
mTgt.zIndex = 1000;
mTgt.style.position = 'absolute';
e = e || event;
initMx = e.pageX;
initMy = e.pageY;
initDlgX = mTgt.offsetLeft;
initDlgY = mTgt.offsetTop;
// offset from top left of element to mouse when button pressed
dx = initMx - initDlgX;
dy = initMy - initDlgY;
document.onmousemove = function(e)
{
e = e || event;
fixPageXY(e);
mTgt.style.left = e.pageX-dx+'px';
mTgt.style.top = e.pageY-dy+'px';
}
this.onmouseup = function()
{
document.onmousemove = null;
}
}
// e = event
function fixPageXY(e)
{
if (e.pageX == null && e.clientX != null )
{
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0)
e.pageX -= html.clientLeft || 0
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0)
e.pageY -= html.clientTop || 0
}
}
</script>
</head>
<body onload='myInit();'>
<div id='tgt'>Drag Me</div>
</body>
</html>