Ruby's Louvre

每天学习一点点算法

导航

javascript的拖放（第2部分）

实现手柄拖动的功能，就是把mousedown的事件侦听器放到handle中。由于我们原先程序的骨架搭建得比较好，添加新功能非常容易。 
#
  (handle || el).onmousedown = dragstart;

但这不够人性化，最好是我们输入一个类名作为handle的参数，拖动类会自动根据此类名在其子孙元素寻找此元素。

    if(handle){
      var cls = new RegExp("(^|\\s)" + handle + "(\\s|$)");
      for(var i=0,l=el.childNodes.length;i <l;i++){
        var child = el.childNodes[i];
        if(child.nodeType == 1 && cls.test(child.className)){
          _handle = child;
          break;
        }
      }
    }

相应地方修改为：

#
  (_handle || el).onmousedown = dragstart;

有时如果拖动元素是个非常复杂，包含相当多东西，这样拖起来很吃内存，这时是不是拖动一个空元素是不是好一些呢？我们可以克隆原来的拖动元素，并把它加入原来元素的后面（相同z-Index，后面的会放到前面的前面)。如果要求是用手柄拖动，我们把原来的手柄也克隆过来就是。

      if(ghosting){ // ghosting为可选参数，表示使用克隆体拖动
        _ghost = el.cloneNode(false);
        el.parentNode.insertBefore(_ghost,el.nextSibling);
        if(_handle){
          _handle = _handle.cloneNode(false);
          _ghost.appendChild(_handle);
        }
          !+"\v1"? _ghost.style.filter = "alpha(opacity=50)" : _ghost.style.opacity = 0.5;
      }

我们还可以增添一些回调函数（onStart，onDrag，onEnd），如果用户没有实现回调函数，我们给个空函数（function(){}）它就好了。

像拖动时显示元素的坐标，我们也可以做成可选参数coords。默认为true，并在手柄上显示，但这样会覆盖住原来的一些东西，我们在拖动前把它保存到一个变量中，拖动后再还原。

另，如果是一个范围中拖动，如一个指定的容器或浏览器的可视区，当拖动元素存在margin时，其右边与下边可能会超出容器。因此我们必须取出其相应的margin，当右边与下边的坐标大于容器右边或下边的坐标时，强逼元素往左边与上边移动相应的值，那个值不用说就是margin值。我们用一个简单的getStyle()函数来取margin值，因此设置元素的margin时请以px为单位，否则在IE中会计算错误。

  var getStyle = function(el, style){
    if(!+"\v1"){
      style = style.replace(/\-(\w)/g, function(all, letter){
        return letter.toUpperCase();
      });
      var value = el.currentStyle[style];
      (value == "auto")&&(value = "0px" );
      return value;
    }else{
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    }
  }

最后一个较为重要的功能，当元素往右边或下边移动，让元素永远留在可视区。这怎样做到呢？我们计算元素右下角的坐标（right与bottom），然后再计算出浏览器可视区的宽与高，当right大于宽时，就让它们的差值作为浏览器的scrollLeft，bottom的情形相仿。

      if(scroll){ //表示让滚动条与元素一起移动
        var doc = isQuirk ? document.body : document.documentElement;
        doc = options.container || doc;
        var a = getCoords(el).left + el.offsetWidth;
        var b = doc.clientWidth;
        if (a > b){
          doc.scrollLeft += a - b;
        }
        var c = getCoords(el).top + el.offsetHeight;
        var d = doc.clientHeight;
        if (c > d){
          doc.scrollTop += c - d;
        }
      }

最后函数扩展成以下样子，功能比较多，下附文档说明：

  //辅助函数1
  var getCoords = function(el){
    var box = el.getBoundingClientRect(),
    doc = el.ownerDocument,
    body = doc.body,
    html = doc.documentElement,
    clientTop = html.clientTop || body.clientTop || 0,
    clientLeft = html.clientLeft || body.clientLeft || 0,
    top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
    left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
    return { 'top': top, 'left': left };
  };
  //辅助函数2
  var getStyle = function(el, style){
    if(!+"\v1"){
      style = style.replace(/\-(\w)/g, function(all, letter){
        return letter.toUpperCase();
      });
      var value = el.currentStyle[style];
      (value == "auto")&&(value = "0px" );
      return value;
    }else{
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    }
  }
  //============================
        var Drag = function(id){
        var el = document.getElementById(id),
        isQuirk = document.documentMode ? document.documentMode == 5 : document.compatMode && document.compatMode != "CSS1Compat",
        options  = arguments[1] || {},
        container = options.container || document.documentElement,
        limit = options.limit,
        lockX = options.lockX,
        lockY = options.lockY,
        ghosting = options.ghosting,
        handle = options.handle,
        revert = options.revert,
        scroll = options.scroll,
        coords =  options.coords,
        onStart =  options.onStart || function(){},
        onDrag =  options.onDrag || function(){},
        onEnd =  options.onEnd || function(){} ,
        marginLeft = parseFloat(getStyle(el,"margin-left")),
        marginRight = parseFloat(getStyle(el,"margin-right")),
        marginTop =  parseFloat(getStyle(el,"margin-top")),
        marginBottom = parseFloat(getStyle(el,"margin-bottom")),
        cls,
        _handle,
        _ghost,
        _top,
        _left,
        _html;
        el.lockX = getCoords(el).left;
        el.lockY = getCoords(el).top;
        el.style.position = "absolute";
        if(handle){
          cls = new RegExp("(^|\\s)" + handle + "(\\s|$)");
          for(var i=0,l=el.childNodes.length;i<l;i++){
            var child = el.childNodes[i];
            if(child.nodeType == 1 && cls.test(child.className)){
              _handle = child;
              break;
            }
          }
        }
        _html = (_handle || el).innerHTML;
        var dragstart = function(e){
          e = e || window.event;
          el.offset_x = e.clientX - el.offsetLeft;
          el.offset_y = e.clientY - el.offsetTop;
          document.onmouseup = dragend;
          document.onmousemove = drag;
          if(ghosting){
            _ghost = el.cloneNode(false);
            el.parentNode.insertBefore(_ghost,el.nextSibling);
            if(_handle){
              _handle = _handle.cloneNode(false);
              _ghost.appendChild(_handle);
            }
              !+"\v1"? _ghost.style.filter = "alpha(opacity=50)" : _ghost.style.opacity = 0.5;
          }
          (_ghost || el).style.zIndex = ++Drag.z;
          onStart();
          return false;
        }
        var drag = function(e) {
          e = e || window.event;
          el.style.cursor = "pointer";
            !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
          _left = e.clientX - el.offset_x ;
          _top = e.clientY - el.offset_y;
          if(scroll){
            var doc = isQuirk ? document.body : document.documentElement;
            doc = options.container || doc;
            options.container && (options.container.style.overflow = "auto");
            var a = getCoords(el).left + el.offsetWidth;
            var b = doc.clientWidth;
            if (a > b){
              doc.scrollLeft = a - b;
            }
            var c = getCoords(el).top + el.offsetHeight;
            var d = doc.clientHeight;
            if (c > d){
              doc.scrollTop = c - d;
            }
          }
          if(limit){
            var _right = _left + el.offsetWidth ,
            _bottom = _top + el.offsetHeight,
            _cCoords = getCoords(container),
            _cLeft = _cCoords.left,
            _cTop = _cCoords.top,
            _cRight = _cLeft + container.clientWidth,
            _cBottom = _cTop + container.clientHeight;
            _left = Math.max(_left, _cLeft);
            _top = Math.max(_top, _cTop);
            if(_right > _cRight){
              _left = _cRight - el.offsetWidth - marginLeft - marginRight;
            }
            if(_bottom > _cBottom){
              _top = _cBottom - el.offsetHeight  - marginTop - marginBottom;
            }
          }
          lockX && ( _left = el.lockX);
          lockY && ( _top = el.lockY);
          (_ghost || el).style.left = _left + "px";
          (_ghost || el).style.top = _top  + "px";
          coords && ((_handle || _ghost || el).innerHTML = _left + " x " + _top);
          onDrag();
        }

        var dragend = function(){
          document.onmouseup = null;
          document.onmousemove = null;
          _ghost && el.parentNode.removeChild(_ghost);
          el.style.left = _left + "px";
          el.style.top = _top +"px";
          (_handle || el).innerHTML = _html;
          if(revert){
            el.style.left = el.lockX   + "px";
            el.style.top = el.lockY  + "px";
          }
          onEnd();
        }
        Drag.z = 999;
        (_handle || el).onmousedown = dragstart;
      }
参数 类型 说明
id string 必选，拖动元素的ID
container object 可拖的范围，必须为拖动元素的父级元素，是否为定位元素无所谓。
limit boolean 默认false，与container配合使用。当值为true时，它会以container或浏览器的可视区作拖动范围。
lockX boolean 默认false。当值为true时，锁定X轴，只允许上下移动。
lockY boolean 默认false。当值为true时，锁定Y轴，只允许左右移动。
handle string 手柄的类名，当设置了此参数后，只允许用手柄拖动元素。
ghosting boolean 默认false。当值为true时，会生成一个与拖动元素相仿的影子元素，拖动时只拖动影子元素，以减轻内存消耗。
revert boolean 默认false。当值为true时，让拖动元素在拖动后回到原来的位置。
coords boolean 默认false。拖动时在手柄或影子元素上显示元素的坐标。
scroll boolean 默认false。当值为true时，允许滚动条随拖动元素移动。
onStart function 在拖动前鼠标按下的那一瞬执行。
onDrag function 在拖动时执行。
onEnd function 在拖动后鼠标弹起的那一瞬执行。

posted on 2009-09-11 18:49  司徒正美  阅读(3168)  评论(20)  编辑  收藏  举报