javascript 模仿windows拖动 封装类

/**
* CreateDate 2011-8-22 18:34:34
*
* @type  Javascript Document
*
* Description of moveElement.class
*
* @author tanyong
*
* @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.οnmοuseοver= 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;
                                }
                        }

查看