[JavaScript]javascript的拖放(第2部分)

baacloud免费翻墙vpn注册使用

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

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

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

01.if(handle){
02.  var cls = new RegExp("(^|\\s)" + handle + "(\\s|$)");
03.  for(var i=0,l=el.childNodes.length;i <l;i++){
04.    var child = el.childNodes[i];
05.    if(child.nodeType == 1 && cls.test(child.className)){
06.      _handle = child;
07.      break;
08.    }
09.  }
10.}

相应地方修改为:

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

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

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

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

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

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

01.var getStyle = function(el, style){
02.  if(!+"\v1"){
03.    style = style.replace(/\-(\w)/g, function(all, letter){
04.      return letter.toUpperCase();
05.    });
06.    var value = el.currentStyle[style];
07.    (value == "auto")&&(value = "0px" );
08.    return value;
09.  }else{
10.    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
11.  }
12.}

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

01.if(scroll){ //表示让滚动条与元素一起移动
02.  var doc = isQuirk ? document.body : document.documentElement;
03.  doc = options.container || doc;
04.  var a = getCoords(el).left + el.offsetWidth;
05.  var b = doc.clientWidth;
06.  if (a > b){
07.    doc.scrollLeft += a - b;
08.  }
09.  var c = getCoords(el).top + el.offsetHeight;
10.  var d = doc.clientHeight;
11.  if (c > d){
12.    doc.scrollTop += c - d;
13.  }
14.}

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

参数 类型 说明
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 在拖动后鼠标弹起的那一瞬执行。

赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏