js拖动功能库

marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90">
<script language="javascript"> // 事件注册，调用示例：_attachEvent(document, "mousemove", moveHandler);
function _attachEvent(obj, evt, func) {
    if(obj.addEventListener) {
        obj.addEventListener(evt,func, true);
    } else if(obj.attachEvent) {
        obj.attachEvent( "on"+evt,func);
    } else {
        eval( "var old"+func+ "="+obj+ ".on"+evt+ ";");
        eval(obj+ ".on"+evt+ "="+func+ ";");
    }
}

// 事件注销，调用示例：_detachEvent(document, "mousemove", moveHandler);
function _detachEvent(obj, evt, func) {
    if(obj.removeEventListener) { //DOM事件模型
        obj.removeEventListener(evt,func, true);
    } else if(obj.detachEvent) { //IE5+ 事件模型
        obj.detachEvent( "on"+evt,func);
    } else  { //IE事件模型
        eval(obj+ ".on"+evt+ "=old"+func+ ";");
    }
}

// 禁止默认行为，调用示例：_cancelDefault(event);
function _cancelDefault(e)
{
    if(e.preventDefault) e.preventDefault(); //2级DOM
    else e.returnValue= false; //IE
}

// 阻止事件冒泡， 调用示例：_cancelBubble(event);
function _cancelBubble(e)
{
    if(e.stopPropagation) e.stopPropagation(); //2 级DOM
    else e.cancelBubble= true; //IE
}
function gid(id)
{
    return document.getElementById(id);
}
// 激发指定对象的拖动事件，使用空的shadow，速度更快。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function DragByShadow(dragObj, event, direction, maxX, maxY)
{
       
    var objShadow;
    var parentOffsetLeft = 0, parentOffsetTop = 0;
    var obj = dragObj;
   
    // 先保存原来的尺寸，防止变形
    dragObj. style.width = dragObj.offsetWidth;
    dragObj. style.height = dragObj.offsetHeight;
//    gid('dbg').innerHTML = dragObj.offsetTop;
    // 处理父节点偏移量
    while(obj.parentNode && obj.parentNode.tagName != "BODY")
    {
        parentOffsetLeft += obj.parentNode.offsetLeft;
        parentOffsetTop += obj.parentNode.offsetTop;       
        obj = obj.parentNode;
    }
   
    if(! document.getElementById( 'shadow'))
    {
        objShadow= document.createElement( "DIV");
        objShadow.id = 'shadow';
        objShadow. style.position= 'absolute';
        objShadow. style.filter = 'alpha(opacity=30,style=0)';
        objShadow. style.backgroundColor = '#ccc';       
        document. body.appendChild(objShadow);
    }
    else
        objShadow= document.getElementById( 'shadow');
       
           
    // 将阴影层放置在本层下面以防止遮住按钮等东西
    objShadow. style.zIndex = dragObj. style.zIndex+1;
    objShadow. style.left = parentOffsetLeft + dragObj.offsetLeft + 'px';
    objShadow. style.top = parentOffsetTop + dragObj.offsetTop + 'px';
   
    objShadow. style.width = dragObj.offsetWidth + 'px';
    objShadow. style.height = dragObj.offsetHeight + 'px';
   
   
    dragStart(objShadow, event, direction, maxX, maxY);
    objShadow. style.display= 'none';
    _attachEvent(document, 'mouseup', dragEnd);

   
    _cancelBubble( event);

    //下面禁止执行默认动作
    _cancelDefault( event);
    function dragEnd()
    {
        if(!direction)
        {
            // 未指定方向时，随意拖动
            dragObj. style.left = objShadow.offsetLeft-parentOffsetLeft + 'px';
            dragObj. style.top = objShadow.offsetTop-parentOffsetTop + 'px';
        } else if( direction == 1) {
            // 水平移动
            dragObj. style.left = objShadow. style.left;
        } else if( direction == 2) {
            // 垂直移动
            dragObj. style.top = objShadow. style.top;
        }
       

        // 删除阴影层，防止缓存
        document. body.removeChild(objShadow);
       
        // 注销事件
        _detachEvent(document, 'mouseup', dragEnd);
       
        //不要再让事件进一步传播.
        _cancelBubble( event);
        if(dragObj.layerid)  //有蒙层的模块要改变蒙层的高度、宽度等。
            ChangeLayer(dragObj);
    }
}

// 激发指定对象的拖动事件，实时拖动。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function dragStart(dragObj, event, direction, maxX, maxY)
{
    // 先保存原来的尺寸，防止变形
    dragObj. style.width = dragObj.offsetWidth;
    dragObj. style.height = dragObj.offsetHeight;
   
    pointX= event.clientX-parseInt(dragObj.offsetLeft);
    pointY= event.clientY-parseInt(dragObj.offsetTop);
   
    _attachEvent(document, "mousemove", moveHandler);
    _attachEvent(document, 'mouseup', dragEnd);

    _cancelBubble( event);

    //下面禁止执行默认动作
    _cancelDefault( event);
   
    function moveHandler(e)  {
        dragObj. style.display = '';
        //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
        if(!direction)
        {
            // 未指定方向时，随意拖动
            dragObj. style.left=(e.clientX-pointX)+ "px";
            dragObj. style.top=(e.clientY-pointY)+ "px";
        } else if( direction == 1) {
            // 水平移动
            dragObj. style.left=(e.clientX-pointX)+ "px";
        } else if( direction == 2) {
            // 垂直移动
            dragObj. style.top=(e.clientY-pointY)+ "px";
        }
        //不要再让其他元素看到该事件.
        _cancelBubble( event);
    }
    function dragEnd()
    {
        // 注销事件
        _detachEvent(document, 'mousemove', moveHandler);
        _detachEvent(document, 'mouseup', dragEnd);
       
        //不要再让事件进一步传播.
        _cancelBubble( event);
    }
}
</ script >

< SCRIPT >
function $(id){ return document.getElementById(id);}
</ script >
< DIV onselectstart= "return false" οnmοusedοwn= dragStart(this,event)
οndragstart= "return false"
style= "LEFT: 50px; CURSOR: move; POSITION: absolute; TOP: 220px" > < IMG id= i1
title= "drag me" src= "/Article/ArticleImage/31/3092/JavascriptDragDrop1.jpg" >随意拖动 </ DIV >

< DIV onselectstart= "return false" οnmοusedοwn= dragStart(this,event,1)
οndragstart= "return false"
style= "LEFT: 50px; CURSOR: pointer; POSITION: absolute; TOP: 50px" > < IMG id= i2
title= "Drag me(horizontal)" src= "/Article/ArticleImage/31/3092/JavascriptDragDrop2.jpg" >水平移动
</ DIV >

< DIV οnmοuseup= "$('i3').src='/Article/ArticleImage/31/3092/JavascriptDragDrop3.jpg';"
onselectstart= "return false"
οnmοusedοwn= "$('i3').src='/Article/ArticleImage/31/3092/JavascriptDragDrop4.jpg';dragStart(this,event,2)"
οndragstart= "return false"
style= "LEFT: 350px; CURSOR: pointer; POSITION: absolute; TOP:50px" > < IMG id= i3
title= "Drag me(vertical)" src= "/Article/ArticleImage/31/3092/JavascriptDragDrop3.jpg" >垂直移动
</ DIV >