[JavaScript]javascript的拖放（第2部分）-Mikel

实现手柄拖动的功能，就是把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/<span class='wp_keywordlink_affiliate'><a href="http://www.mikel.cn/category/%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0/javascript" title="JavaScript" target="_blank">JavaScript</a></span>"> 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 drag = function(e) { e = e || window.event; el.style.cursor = "pointer"; // var target = e.srcElement || e.target; // if(!!handle && target != handle ) return !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges(); var _left = e.clientX – el.offset_x, _top = e.clientY – el.offset_y; 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; } if(_bottom > _cBottom){ _top = _cBottom – el.offsetHeight; } } lockX && ( _left = el.lockX); lockY && ( _top = el.lockY); el.style.left = _left + "px"; el.style.top = _top + "px"; (handle || el).innerHTML = _left + " x " + _top; } 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"> <style type="text/css"> .drag {width:100px;height:100px;z-index:200;} #drag1 {background:red} #drag2 {background:#E8D098;} #drag3 {background:#fff;} #drag4 {background:#E8FFE8;margin-right:2px;margin-left:10px;} #drag5 {background:#ff0;} #drag6 {background:#66c;} #drag7 {background:#FBFBEA;} #drag8 {background:#E8E8FF;} #drag9 {background:#00B271;} #drag10 {background:#DDF3FF;} .handle {width:80px;height:20px;background:aqua;} #parent {width:300px;height:300px;background:blue;} </style> <script type="text/<span class='wp_keywordlink_affiliate'><a href="http://www.mikel.cn/category/%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0/javascript" title="JavaScript" target="_blank">JavaScript</a></span>"> //辅助函数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; } window.onload = function(){ var cache = []; var _ = function(id){ return cache[id] || (cache[id] = document.getElementById(id)) } var p = _("parent"); new Drag("drag1",{revert:true}); new Drag("drag2",{container:p,limit:true,lockX:true}); new Drag("drag3",{container:p,limit:true,lockY:true}); new Drag("drag4",{container:p,limit:true,handle:"handle"}); new Drag("drag5",{scroll:true}); new Drag("drag6",{ghosting:true,limit:true,handle:"handle"}) new Drag("drag7",{coords:false,handle:"handle"}); new Drag("drag8",{onStart:function(){_("drag8").innerHTML= "拖动开始"}}); new Drag("drag9",{onStart:function(){_("drag9").innerHTML= "拖动中"}}); new Drag("drag10",{ghosting:true,onEnd:function(){_("drag10").innerHTML= "拖动结束"}}); } </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>

[JavaScript]javascript的拖放（第2部分）

相关推荐

热门标签

分类目录

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏