知识点：
1、clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
2、offsetLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
3、注意页面上由于鼠标按下拖动造成的选中文字和图片的选择状态
4、防止事件冒泡
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js拖动层效果</title>
</head>
<body>
<script type="text/javascript">
function addEvent(oTarget, sEventType, fnHandler)
{
if (oTarget.addEventListener)
{
oTarget.addEventListener(sEventType, fnHandler, false);
}
else if (oTarget.attachEvent)
{
oTarget.attachEvent("on" + sEventType, fnHandler);
}
else
{
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEvent(oTarget, sEventType, fnHandler)
{
if (oTarget.removeEventListener)
{
oTarget.removeEventListener(sEventType, fnHandler, false);
}
else if (oTarget.detachEvent)
{
oTarget.detachEvent("on" + sEventType, fnHandler);
}
else
{
oTarget["on" + sEventType] = null;
}
};
var startX ,startY, endX, endY, currentObj;
function start(e)
{
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
currentObj = evtTarget;
//添加描述
startX = evt.clientX - currentObj.offsetLeft;
startY = evt.clientY - currentObj.offsetTop;
addEvent(document, "mousemove", onMove);
addEvent(document, "mouseup", onStop);
if(window.addEventListener)
{
addEvent(evtTarget, "blur", onStop); //焦点丢失
evt.perventDefault(); //添加描述
}
else if(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1)
{
addEvent(currentObj,"losecapture", onStop); //焦点丢失
currentObj.setCapture(); //鼠标即使跑到了页面外依然可以拖动 ie8 不用这句也可以，但ie6 ,ie7必须用
}
}
function onMove(e)
{
var evt = e || window.event;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消页面上由于鼠标按下拖动造成的选中文字和图片的选择状态
endX = evt.clientX;
endY = evt.clientY;
currentObj.style.left = endX - startX + "px";
currentObj.style.top = endY - startY + "px";
}
function onStop(e)
{
removeEvent(document, "mousemove", onMove);
removeEvent(document, "mouseup", onStop);
if(window.addEventListener)
{
removeEvent(evtTarget, "blur", onStop);//防止冒泡
}
else if(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1)
{
removeEvent(currentObj,"losecapture", onStop);
currentObj.releaseCapture();//防止冒泡
}
}
</script>
<div id="abcd" style="height:100px; 100px; background:#09F; position:absolute; left:100px; top:100px;" onmousedown="start()">
</div>
</body>
</html>