js拖拽功能 2 June 23rd, 2010

昨天用纯js写了个拖拽功能，在坐公车的时候回想一下，发现昨天那样写js-拖拽功能 还是有很大的问题。今天干完活再回头看看昨天的代码，果然发现不少问题，在这里列出来一下：

1，只能支持一个层的拖拽

2，坐标获取位置的问题

这两个问题折腾我一个下午时间，下面贴一下最新的代码，最新的代码支持多个层拖拽，更精准的获取鼠标的位置，同时添加对图片拖拽的支持。大家看代码是不是觉得很熟悉捏？哈哈，没错啦，偶就是模仿jquery的写法，哈哈，虽然还没看懂jquery的写法，但是还是先模仿一下。自我感觉良好。(*^__^*)

调用方法还是一样，只要在页面加载后，执行以下代码就OK

window.onload=function()
{
$(”Contain”).Draggable();
$(”Head”).Draggable();
$(”Frame”).Draggable();

}

源代码如下：

(function(window, undefined) {
    var DragUtility = function(id) {
          document.getElementById(id).style.position ="absolute";
        return new DragUtility.InitMousePos.Init(id);
    },
    _$ = window.$;
    //定义全局变量来保存当前的拖拽的层
    var currObject = null;
    DragUtility.InitMousePos = {
        obj: null,
        Init: function(id) {
            this.obj = document.getElementById(id);
            this.obj.onmousedown = function(evt) {
                //this.obj = document.getElementById(id);
                this.style.cursor = "move";
                //this.style.position = "absolute";
                //再次点击层时候重新添加事件
                if (document.onmousemove == null)
                    document.onmousemove = this.Move;
                if (this.onmouseup == null)
                    this.onmouseup = this.Release;
                currObject = this;

                var evt = evt || window.event;
                //如果DIV包含图片，拖拽时将显示禁止图标，因此必须将returnValue置为false
                evt.returnValue = false;
                //计算鼠标点击后，鼠标距离div左边界和上边界的距离
                var divLeft = currObject.style.left.replace("px","");
                var divTop = currObject.style.top.replace("px","");
                if (evt.pageX || evt.pageY) {
                    currObject.mouseLeft = evt.pageX - divLeft;
                    currObject.mouseTop =evt.pageY -divTop;
                }
                else//ie
                {
                    currObject.mouseLeft = evt.clientX + document.documentElement.scrollLeft-divLeft;
                    currObject.mouseTop = evt.clientY + document.documentElement.scrollLeft-divTop;
                }

            };
            this.obj.Move = function(evt) {

                if (typeof (currObject) == "undefined" || currObject == null) {
                    return;
                }
                var evt = evt || window.event;
                var leftPox, topPox;
                //计算div层left，top值
                if (evt.pageX || evt.pageY) {
                    leftPox = evt.pageX - currObject.mouseLeft;
                    topPox = evt.pageY - currObject.mouseTop;
                }
                else//ie
                {
                    //leftPox = evt.clientX +  document.documentElement.scrollLeft - mouseX;
                    leftPox = evt.clientX + document.documentElement.scrollLeft-currObject.mouseLeft;
                    //topPox = evt.clientY+ document.documentElement.scrollTop-mouseY;
                    topPox = evt.clientY + document.documentElement.scrollTop-currObject.mouseTop;
                }
                currObject.style.left = leftPox;
                currObject.style.top = topPox;

            };

            this.obj.Draggable = function() {
                document.onmousemove = this.Move;
                this.onmouseup = this.Release;
            };

            this.obj.Release = function() {
                if (this.releaseCapture) {
                    this.releaseCapture();
                    document.onmousemove = null;
                    this.onmouseup = null;
                    this.currObject = null;
                }
                else if (window.captureEvents) {
                    document.onmousemove = null;
                    this.onmousemove = null;
                    this.currObject = null;
                }
            };
            return this.obj;
        }
    };

    window.DragUtility = window.$ = DragUtility;
})(window);

PS：今天还遇到一个问题，看到公司系统的有 以下代码

if(document.all)
document.getElementById(”historyDesc”).value = document.getElementById(”SRDiv”).innerText;
else
document.getElementById(”historyDesc).value = document.getElementById(”SRDiv”).textContent;

这里是要获取元素的innerText，我们都知道firefox下面是没有innerText这个属性的，它有类似textContent属性，但是textContent与InnerText有些区别，InnerText会将所有html标签去除，同时将多个空格变成一个，将换行转为”\r\n”(IE)或者”\n”(firefox)，但是textContent则去除所有html标签，同时也去掉空格和换行。

因此如果想实现innerText同样的效果怎么办呢？？在网上搜索了一下，很快就找到答案，这里MARK一下，只要在页面添加如下代码，那么firefox也可以用innerText啦。

function isIE(){
  if(window.navigator.userAgent.toString().toLowerCase().indexOf("msie") >=1)
    return true;
  else
    return false;
}

//由于IE下的innerText与firefox下的textContent的区别，因此添加以下代码，使firefox下可以使用innerText
if(!isIE()){   //firefox   innerText   define
    HTMLElement.prototype.__defineGetter__("innerText",
        function(){
            var   anyString   =   "";
            var   childS   =   this.childNodes;
            for(var   i=0;   i <childS.length;   i++)   {
            if(childS[i].nodeType==1)
                anyString   +=   childS[i].tagName=="BR"   ?   '\n'   :   childS[i].innerText;
            else if(childS[i].nodeType==3)
                anyString   +=   childS[i].nodeValue;
          }
          return anyString;
        }
    );
    HTMLElement.prototype.__defineSetter__("innerText",
        function(sText){
                this.textContent=sText;
            }
    );
}