拖动层的javasvript代码 十行代码即可写出兼容版拖动层

 

这是帮一个CSDN网友写的一个拖动层改变层尺寸DEMO

核心代码如下：

    
       var  wrapId  =   " dragDiv " ;  var  wrap  =  getElementById(wrapId); 
       var  isChangeLayout;
      wrap.onmouseover  =   function  ()  ... {
        isChangeLayout=getElementById('layout').checked?true:false;
        wrap.style.cursor = isChangeLayout?"move":"se-resize";
        if (window.ActiveXObject) 
          wrap.onselectstart = function () ...{ event.returnValue = false; }
        document.onmousedown = function (evt) ...{
          /**//* save the original coordinates */
          evt = window.event||evt; var a=getAbsoluteCoords(wrap);
          wrap.cx=evt.clientX-(isChangeLayout?a.left:a.width); 
          wrap.cy=evt.clientY-(isChangeLayout?a.top:a.height);
          document.onmousemove = function (evt) ...{
            /**//* change the coords when mouse is moveing */
            evt = window.event||evt; try ...{
              if (isChangeLayout) ...{
                wrap.style.left = (evt.clientX-wrap.cx)+"px";
                wrap.style.top = (evt.clientY-wrap.cy)+"px";
              } else ...{
                wrap.style.width = (evt.clientX-wrap.cx)+"px";
                wrap.style.height = (evt.clientY-wrap.cy)+"px";
              }
            } catch (ex) ...{};
          };
          document.onmouseup = function () ...{
            /**//* drag end release the event */
            document.onmousemove = null;
            document.onmouseup = null;
            wrap.style.cursor="default";
          };
        };
      }
 

上面的代码兼容了改变尺寸和改变布局的代码，所以多出了很多判断的代码，如果不做判断，10的确是可以把拖动的代码写完的。去掉判断语句即可。如下：

 

       var  wrapId  =   " dragDiv " ;  var  wrap  =  getElementById(wrapId); 
      wrap.onmouseover  =   function  ()  ... {
        wrap.style.cursor = "se-resize";
        document.onmousedown = function (evt) ...{
          evt = window.event||evt; var a=getAbsoluteCoords(wrap);
          wrap.cx=evt.clientX-a.width; wrap.cy=evt.clientY-a.height
          document.onmousemove = function (evt) ...{
            evt = window.event||evt; 
            wrap.style.width = (evt.clientX-wrap.cx)+"px";
            wrap.style.height = (evt.clientY-wrap.cy)+"px";
          };
          document.onmouseup = function () ...{
            document.onmousemove = null;
            document.onmouseup = null;
            wrap.style.cursor="default";
          };
        };
      }

demo:http://www.never-online.net/code/js/dragdemo/

转:http://www.never-online.net/blog/article.asp?id=148