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

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

[ 2007-04-10 22:29:16 | Author: never-online ]

Font Size: Large | Medium | Small

Close Advertisement

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

DEMO的地址： http://www.never-online.net/code/js/dragdemo/

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

核心代码如下：

Copy Code(拷贝代码)- Run HTML(运行代码)- Save Code(另存代码)

      /* Kernel code, drag div change the coords */
      /* by never-online, http://www.never-online.net */
    
      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";
          };
        };
      }

思路就不用说了，就是down->move->up几个事件。没有用captureEvent，主要是因为在down事件后，才把move的事件写出来，而up的时候把拖动的事件release。这种方法简单，而且可兼容其它的浏览器，可以说是“价美物廉”的产品了，我现在一般写拖动层也都是应用这种模式，也许可以想想更简单有效的方法。上面的代码兼容了改变尺寸和改变布局的代码，所以多出了很多判断的代码，如果不做判断，10的确是可以把拖动的代码写完的。去掉判断语句即可。如下：

Copy Code(拷贝代码)- Run HTML(运行代码)- Save Code(另存代码)

      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";
          };
        };
      }