Drag:
offsetTop:
offsetLeft:
cursor: move; -- 出现十字
var oBox = document.getElementById("box");
var oH2 = oBox.getElementsByTagName("h2")[0];
var oA = oBox.getElementsByTagName("a")[0];
var aSpan = oBox.getElementsByTagName("span");
var disX = disY = 0;
var bDrag = false;
//鼠标按下, 激活拖拽
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oBox.offsetLeft;
disY = event.clientY - oBox.offsetTop;
return false;
}
//拖拽开始
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oBox.style.marginTop = oBox.style.marginLeft = 0;
oBox.style.left = iL + "px";
oBox.style.top = iT + "px";
status();
return false
};
//鼠标释放, 结束拖拽
document.onmouseup = function ()
{
bDrag = false;
status()
};
//阻止冒泡
oA.onmousedown = function (event)
{
(event || window.event).cancelBubble = true
};
//监听状态函数 显示在屏幕上的状态
function status()
{
aSpan[0].innerHTML = bDrag;
aSpan[1].innerHTML = oBox.offsetTop;
aSpan[2].innerHTML = oBox.offsetLeft
}
//初始调用
status()