www.gusucode.com > 以前收藏的Ajax网页DIV拖动自动排列特效代码源码程序 > 以前收藏的Ajax网页DIV拖动自动排列特效代码/DragPage/DragPage/CDrag.js

    //Download by http://www.srcfans.com
function JKDrag_CPos(x, y)
{
    this.x = x;
    this.y = y;
}

function JKDrag_CPos_GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new JKDrag_CPos(target.offsetLeft, target.offsetTop);
    
    var target = target.parentElement;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
        
        target = target.parentElement
    }
    
    return pos;
}


//objStr 当前对象的名称，字符串类型。
//targetStr 被拖拽的物件的 id 字符串，比如 VC++ 中的窗口。
//controllerStr 用于响应拖拽的物件的 id 字符串，比如 VC++ 中的窗口标题。
//targetStr 和 controllerStr 也可以是同一个物件。
function JKDrag(objStr, targetStr, controllerStr)
{
    this.objStr = objStr;
    this.target = document.getElementById(targetStr);
    this.controller = document.getElementById(controllerStr);
    
    this.draging = false; //是否处于拖拽中
    this.offsetX = 0; //X方向左右偏移量，鼠标按下时鼠标与 targetStr 左端的距离。
    this.offsetY = 0; //Y方向上下偏移量，鼠标按下时鼠标与 targetStr 上端的距离。
    
    this.Bind = JKDrag_Bind; //为物价绑定拖拽功能
    this.BeforeDrag = JKDrag_BeforeDrag; //开始拖拽
    this.OnDrag = JKDrag_OnDrag; //拖拽中
    this.EndDrag = JKDrag_EndDrag; //结束拖拽
    this.TranslateButton = JKDrag_TranslateButton; //不同的浏览器有不同的鼠标按钮值，此函数将鼠标事件的按钮值统一。
    this.FilterNull = JKDrag_FilterNull; //过滤 null，如果 v 为 null，则返回零长度字符串。
    
    this.Bind();
}


//为物件绑定拖拽功能
function JKDrag_Bind()
{
    //准备样式数据
    if (!this.target.style.position)
    {
        this.target.style.position = "absolute";
    }
    
    var pos = JKDrag_CPos_GetObjPos(this.target);
    if (!this.target.style.left)
    {
        this.target.style.left = pos.x + "px";
    }
    if (!this.target.style.top)
    {
        this.target.style.top = pos.y + "px";
    }
    
    this.controller.style.cursor = "move";
    
    //准备事件数据
    var eventDownStr = this.objStr + ".BeforeDrag();";
    var eventMoveStr = this.objStr + ".OnDrag();";
    var eventUpStr = this.objStr + ".EndDrag();";
    
    if (window.attachEvent)
    {
        //IE
        this.controller.attachEvent("onmousedown", function (){eval(eventDownStr);});
        document.body.attachEvent("onmousemove", function (){eval(eventMoveStr);}); //使用 document.body 不至于拖得太快时，释放鼠标时不响应 EndDrag。
        document.body.attachEvent("onmouseup", function (){eval(eventUpStr);});
    }
    else
    {
        //其它浏览器中使用的是 setAttribute 设置事件属性字符串，这就不能剥夺事件属性上原有的字符串函数
        eventDownStr = this.FilterNull(this.target.getAttribute("onmousedown")) + ";" + eventDownStr;
        eventMoveStr = this.FilterNull(document.body.getAttribute("onmousemove")) + ";" + eventMoveStr;
        eventUpStr = this.FilterNull(document.body.getAttribute("onmouseup")) + ";" + eventUpStr;
        eventDownStr = (eventDownStr.substr(0,1)==";")?eventDownStr.substr(1,eventDownStr.length):eventDownStr;
        eventMoveStr = (eventMoveStr.substr(0,1)==";")?eventMoveStr.substr(1,eventMoveStr.length):eventMoveStr;
        eventUpStr = (eventUpStr.substr(0,1)==";")?eventUpStr.substr(1,eventUpStr.length):eventUpStr;
        
        this.controller.setAttribute("onmousedown", eventDownStr);
        document.body.setAttribute("onmousemove", eventMoveStr);
        document.body.setAttribute("onmouseup", eventUpStr);
    }
}


//开始拖拽
function JKDrag_BeforeDrag()
{
    var theEvent = window.event || arguments.callee.caller.arguments[0];
    
    if (this.TranslateButton(theEvent) != "l")
    {
        //不是鼠标左键
        return;
    }
    this.offsetX = document.body.scrollLeft + theEvent.clientX-parseInt(this.target.style.left);
    this.offsetY = document.body.scrollTop + theEvent.clientY-parseInt(this.target.style.top);
    this.target.className = "actived";
    this.draging = true;
}


//拖拽中
function JKDrag_OnDrag()
{
    var theEvent = window.event || arguments.callee.caller.arguments[0];
    
    if(!this.draging)
    {
        //不处于拖拽中
        return;
    }
    //更新位置
    theEvent.returnValue = false;
    this.target.style.left = (document.body.scrollLeft + theEvent.clientX-this.offsetX) + "px";
    this.target.style.top = (document.body.scrollTop + theEvent.clientY-this.offsetY) + "px";
}


//结束拖拽
function JKDrag_EndDrag()
{
    var theEvent = window.event || arguments.callee.caller.arguments[0];
    
    if (this.TranslateButton(theEvent) != "l")
    {
        //不是鼠标左键
        return;
    }
    this.draging = false;
    this.target.className = "docked";
}


//不同的浏览器有不同的鼠标按钮值
//此函数将鼠标事件的按钮值统一
//按下鼠标左键，返回 l
//按下鼠标右键，返回 r
//按下鼠标中键（滚轮），返回 m
function JKDrag_TranslateButton(event)
{
    if (window.navigator.appName.indexOf("Microsoft") >= 0)
    {
        //IE5.0、IE6.0 的 appName 均为：Microsoft Internet Explorer
        //腾讯TT、傲游等使用 IE 内核的浏览器，其 appName 也为：Microsoft Internet Explorer
        //这里不能使用 document.all 来判断，因为 Opera 也具有 document.all 属性，但其鼠标按钮值却和 FireFox 是一类的。
        if (event.button == 1)
        {
            return "l";
        }
        else if (event.button == 2)
        {
            return "r";
        }
        else if (event.button == 4)
        {
            return "m";
        }
    }
    else
    {
        if (event.button == 0)
        {
            return "l";
        }
        else if (event.button == 2)
        {
            return "r";
        }
        else if (event.button == 1)
        {
            return "m";
        }
    }
    
    return "";
}


//过滤 null，如果 v 为 null，则返回零长度字符串
function JKDrag_FilterNull(v)
{
    if (v)
    {
        return v;
    }
    else
    {
        return "";
    }
}