[转载]javascript 模仿windows拖动 封装类

javascript 模仿windows拖动 封装类
/**
* CreateDate 2011-8-22 18:34:34
* @type  Javascript Document
* Description of moveElement.class
* @example drop.reg("span","div");
*/
var drop =
{
    reg: function (handler, movediv, cursor)   // 注册鼠标移动的一些事件。
    {
        var isclick = false;
        var clickleft = 0;
        var clicktop = 0;
        var target = this.$(handler);
        var movediv = this.$(movediv);
        movediv.style.position = "absolute";
        target.style.cursor = cursor || "move";
        function clickdrop(e)   // 按下鼠标左键时的事件。
        {
            e = window.event || e;  // 获取当前事件对象。
            var tag = document.createElement("div")
            tag.id = "move";
            tag.style.width = movediv.style.width;
            tag.style.height = movediv.style.height;
            tag.style.position = "absolute";
            tag.style.left = movediv.style.left;
            tag.style.top = movediv.style.top;
            document.getElementsByTagName("body")[0].appendChild(tag);
            isclick = true;  // 记录已经准备开始移动了。
            clickleft = e.clientX - parseInt(movediv.style.left); // 记录当前坐标轴。
            clicktop = e.clientY - parseInt(movediv.style.top);
        }
        function startdrop(e)   // 鼠标开始移动时的事件。
        {
            e = window.event || e; // 获取当前事件对象。
            if (!isclick) return false; // 如果isclick不等于真了返回。
            movediv.style.left = movediv.style.left ? movediv.style.left : 1;
            movediv.style.top = movediv.style.top ? movediv.style.top : 1;
            document.getElementById("move").style.border = "1px dotted #000000";
            document.getElementById("move").style.left   = e.clientX - clickleft + "px";
            document.getElementById("move").style.top = e.clientY - clicktop + "px";
        }
        function endrop(e)   // 释放鼠标左键时的事件。
        {
            e = window.event || e;
            if (isclick)   // 如果isclick还为真那么就赋值为假。
            {
                movediv.style.left = e.clientX - clickleft + "px"; // 把鼠标当前移动的位置赋值给div
                movediv.style.top = e.clientY - clicktop + "px"; // 当前位置减去开始位置就是层当前存放的位置。
                document.getElementsByTagName("body")[0].removeChild(document.getElementById("move"))
                if (this.isIE) movediv.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
                isclick = false;
                document.documentElement.onmousemove = null;
            }
        }
        target.onmouseover = clickdrop;
        target.onmousedown = clickdrop; // 鼠标按下事件。
        document.onmouseup = endrop;  // 鼠标释放事件。

        document.onmousemove = startdrop; // 鼠标移动事件。
        // movediv.onselectstart = movediv.oncontextmenu = function () { return false; }; // 禁止选择和右键菜单。
    },
    isIE: (navigator.appName == "Microsoft Internet Explorer") || window.ActiveXObject, // 判断是否为IE。,
    $: function (objectId) //获取id的函数
    {
        var id = null;
        if(document.getElementById && document.getElementById(objectId))
        {
            // W3C DOM
            id = document.getElementById(objectId);
        }
        else if (document.all && document.all(objectId))
        {
            // MSIE 4 DOM
            id = document.all(objectId);
        }
        else if (document.layers && document.layers[objectId])
        {
            // NN 4 DOM.. note: var won't find nested layers
            id = document.layers[objectId];
        }
        else
        {
            id = "undefind";
        }
        return (id == "undefined" || id == null) ? "\u672a能获取节点" : id;
    }
}

/// <summary>
/// 拖动层
/// </summary>
/// <param name="containerid">层id</param>
/// <param name="ctitleid">触发拖动对象id</param>
/// <param name="boundaryid">边界容器id</param>
///example var d = new Drag("div1","div1")
var Drag = function(containerid, ctitleid, boundaryid) {
    this.container = document.getElementById(containerid);
    this.ctitle = document.getElementById(ctitleid);
    this.boundary = document.getElementById(boundaryid);
    var bobj = document.getElementById(boundaryid) || document.body;
    this.posX = 0;
    this.posY = 0;

    var obj = this;
    var srcObj = this.container;
    this.container.style.left = $(bobj).offset().left;
    this.container.style.top = $(bobj).offset().top;
    this.isIE = function() { return navigator.appVersion.toLowerCase().indexOf('msie') != -1; }
    this.borderX = obj.boundary == null ? 0 : obj.boundary.offsetLeft;
    this.borderY = obj.boundary == null ? 0 : obj.boundary.offsetTop;
    this.borderEX = obj.borderX + (obj.boundary == null ? document.body.offsetWidth : obj.boundary.offsetWidth) - obj.container.offsetWidth;
    this.borderEY = obj.borderY + (obj.boundary == null ? (document.documentElement.clientHeight > document.body.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) : obj.boundary.offsetHeight) - obj.container.offsetHeight;
    this.mousemove = function(e) {
        e = e || window.event;
        var x = e.clientX - obj.posX;
        var y = e.clientY - obj.posY;
        if (x >= obj.borderX && x <= obj.borderEX)
            obj.container.style.left = x + 'px';
        else if (x < obj.borderX)
            obj.container.style.left = obj.borderX + 'px';
        else
            obj.container.style.left = obj.borderEX + 'px';
        if (y >= obj.borderY && y <= obj.borderEY)
            obj.container.style.top = y + 'px';
        else if (y < obj.borderY)
            obj.container.style.top = obj.borderY + 'px';
        else
            obj.container.style.top = obj.borderEY + 'px';
    };
    this.ctitle.onmousedown = function(e) {
        e = e || window.event;
        obj.posX = e.clientX - parseInt(srcObj.style.left);
        obj.posY = e.clientY - parseInt(srcObj.style.top);
        document.onmousemove = obj.mousemove;
        if (e.stopPropagation) { 
            e.stopPropagation();
        } else {
            e.cancelBubble = true; 
        }
    };


    document.onmouseup = function() {
        document.onmousemove = null;
    };
    this.container.style.zIndex = 101;
    this.container.style.position = "absolute";
    this.ctitle.style.cursor = "move";
    this.top = function() {
        this.container.style.left = bobj.offsetLeft + "px";
        this.container.style.top = bobj.offsetTop + "px";

    };
    this.center = function() {
        obj.borderX = obj.boundary == null ? 0 : obj.boundary.offsetLeft;
        obj.borderY = obj.boundary == null ? 0 : obj.boundary.offsetTop;
        obj.borderEX = obj.borderX + (obj.boundary == null ? document.body.offsetWidth : obj.boundary.offsetWidth) - obj.container.offsetWidth;
        obj.borderEY = obj.borderY + (obj.boundary == null ? (document.documentElement.clientHeight > document.body.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) : obj.boundary.offsetHeight) - obj.container.offsetHeight;
        var l = ((obj.boundary.offsetWidth - obj.container.offsetWidth) / 2) + obj.borderX;
        var t = (obj.boundary.offsetHeight - obj.container.offsetHeight) / 2 + obj.borderY;
        this.container.style.left = l + "px";
        this.container.style.top = t + "px";
    }
}