window.onload = function()
{
var bar = document.getElementById('bar');
var box = document.getElementById("box");
bar.onmousedown = function(event)
{
var event = event || window.event;
// console.log(event.clientX);
console.log(box.offsetTop);
var disX = event.clientX - box.offsetLeft;//偏移量
var disY= event.clientY - box.offsetTop;
console.log(disY);
document.onmousemove = function(event)
{
event = event || window.event;
mouseMove(event,disX,disY);
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}
}
}
function mouseMove(event,disX,disY)
{
var box = document.getElementById('box');
var event = event || window.event;
var left = event.clientX - disX;
var top = event.clientY - disY;
winWidth = document.documentElement.clientWidth || document.body.clientWidth;
winHeight = document.documentElement.clientHeight || document.body.clientHeight;
maxW = winWidth - box.offsetWidth;
maxH = winHeight - box.offsetHeight;
if (left > maxW)
{
left = maxW;
}
else if (left < 0)
{
left = 0;
}
else if(top >maxH)
{
top = maxH;
}
else if(top < 0)
{
top = 0;
}
box.style.left = left +'px';
box.style.top = top + 'px';
}
</script>
实在看不懂你要干什么
IE不兼容document.documentElement.clientWidth和document.documentElement.clientHeight,兼容IE应该使用document.body.clientWidth或document.body.clientHeight,兼容全部的写法如下:
var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
从你的代码上看,你是通过拖动#bar来使#box跟着运动,看不到你的html结构,你具体的需求是什么?
你写的是一个拖拽,然后你要表达哪里不兼容IE还是出现什么问题?就一堆代码,不懂要干嘛。建议您可以把问题描述清楚,这样也方便人家回答。