js拖动层效果

知识点：

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>