luluping

2009-09-12 10:16

javascript的拖放（第2部分）

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

1.# 
2.  (handle || el).onmousedown = dragstart;

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <style type="text/css">
            .drag {width:100px;height:100px;z-index:200;}
            #drag1 {background:red;}
            .handle {width:80px;height:20px;background:aqua;}
            #parent {width:300px;height:300px;background:blue;}
        </style>
        <script type="text/javascript">
            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 };
            };
            var Drag = function(id){
                var el = document.getElementById(id),
                options  = arguments[1] || {},
                container = options.container || document.documentElement,
                limit = false || options.limit,
                lockX = false || options.lockX,
                lockY = false || options.lockY,
                handle = options.handle;
                el.style.position = "absolute";

var dragend = function(){
                    document.onmouseup = null;
                    document.onmousemove = null;
                }

var dragstart = function(e){
                    e = e || window.event;
                    lockX && (el.lockX = getCoords(el).left);
                    lockY && (el.lockY = getCoords(el).top);
                    el.offset_x = e.clientX - el.offsetLeft;
                    el.offset_y = e.clientY - el.offsetTop;
                    document.onmouseup = dragend;
                    document.onmousemove = drag;
                    el.style.zIndex = ++Drag.z;
                    return false;
                }

Drag.z = 999;
                (handle || el).onmousedown = dragstart;
            }

window.onload = function(){
                var p = document.getElementById("parent");
                var h = document.getElementById("handle");
                new Drag("drag1",{handle:h,limit:true});
            };
        </script>
        <title>拖动</title>
    </head>
    <body id="body">
        <div id="parent">
            <p>拖动时可能被选中的文本……………………</p>
            <div id="drag1" class="drag"><div class="handle" id="handle">handle</div></div>
        </div>
    </body>
</html>

但这不够人性化，最好是我们输入一个类名作为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; 
    } 
  } 
}

相应地方修改为：

1.# 
2.  (_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 = true || 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 && _ghost && ((_handle || _ghost).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	默认true。拖动时在手柄或影子元素上显示元素的坐标。
scroll	boolean	默认false。当值为true时，允许滚动条随拖动元素移动。
onStart	function	在拖动前鼠标按下的那一瞬执行。
onDrag	function	在拖动时执行。
onEnd	function	在拖动后鼠标弹起的那一瞬执行。

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=8">

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

</script>
        <title>拖动</title>
    </head>
    <body id="body">
        <p>拖动时可能被选中的文本……………………</p>
        <div id="parent">
            <div id="drag1" class="drag">drag1测试revert参数</div>
            <div id="drag2" class="drag">drag2测试锁定X轴</div>
            <div id="drag3" class="drag">drag3测试锁定Y轴</div>
            <div id="drag4" class="drag"><div class="handle" >handle</div>drag4测试修正margin</div>
            <div id="drag5" class="drag">drag5测试scroll参数</div>
            <div id="drag6" class="drag">
                <div class="handle" >drag6</div>
                <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_tear.gif" />
                <div>测试影子拖动</div>
            </div>
            <div id="drag7" class="drag"><div class="handle" >handle</div>drag7测试关闭显示坐标</div>
            <div id="drag8" class="drag">drag8测试onStart</div>
            <div id="drag9" class="drag">drag9测试onDrag</div>
            <div id="drag10" class="drag"><div class="handle" >handle</div>drag10测试onEnd</div>
        </div>
    </body>
</html>

luluping

公告

javascript的拖放（第2部分） (转)

javascript的拖放（第2部分）