欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

自己封裝的一個(gè)原生JS拖動(dòng)方法(推薦)

 更新時(shí)間：2016年11月22日 10:07:56   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇自己封裝的一個(gè)原生JS拖動(dòng)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦

代碼：

function drag(t,p){

  var point = p || null,
    target = t || null,
    resultX = 0,
    resultY = 0;

  (!point)? point = target : ''; //如果沒(méi)有拖動(dòng)點(diǎn)，則拖動(dòng)點(diǎn)默認(rèn)為整個(gè)別拖動(dòng)元素

  function getPos(t){
    var offsetLeft = 0,
      offsetTop = 0,
      offsetParent = t;

    while(offsetParent){
      offsetLeft+=offsetParent.offsetLeft;
      offsetTop+=offsetParent.offsetTop;
      offsetParent = offsetParent.offsetParent;
    }

    return {'top':offsetTop,'left':offsetLeft};
  }

  function core(){

    var width = document.body.clientWidth || document.documentElement.clientWidth,
      height = document.body.clientHeight || document.documentElement.clientHeight; 
      maxWidth = width - target.offsetWidth,
      maxHeight = height - target.offsetHeight;

    (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默認(rèn)位置。
    (resultY >= maxHeight)?  target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默認(rèn)位置。

    point.onmousedown=function(e){  
      var e = e || window.event,
        coordX = e.clientX,
        coordY = e.clientY,
        posX = getPos(target).left,
        posY = getPos(target).top;

      point.setCapture && point.setCapture();  //將Mouse事件鎖定到指定元素上。
      document.onmousemove=function(e){

        var ev = e || window.event,
          moveX = ev.clientX,
          moveY = ev.clientY;

        resultX = moveX - (coordX - posX); //結(jié)果值是坐標(biāo)點(diǎn)減去被拖動(dòng)元素距離瀏覽器左側(cè)的邊距
        resultY = moveY - (coordY - posY);

        (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px'; 
        (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 

        ev.stopPropagation && ev.stopPropagation(); 
        ev.preventDefault;
        ev.returnValue = false;
        ev.cancelBubble = true;
      };
    };
    document.onmouseup=function(){  // 解決拖動(dòng)時(shí)，當(dāng)鼠標(biāo)指向的DOM對(duì)象非拖動(dòng)點(diǎn)元素時(shí)，無(wú)法觸發(fā)拖動(dòng)點(diǎn)的onmousedown的BUG。
      document.onmousemove = null;  
      point.releaseCapture && point.releaseCapture();  // 將Mouse事件從指定元素上移除。
    };
    point.onmouseup=function(e){
      var e = e || window.event;
      document.onmousemove = null;
      point.releaseCapture && point.releaseCapture();
    };
  }
  core();
  window.onresize = core;  
}

使用方式：

drag(t,p)
/* 
 * 說(shuō)明 
 * t 表示被拖動(dòng)的元素
 * p 表示拖動(dòng)點(diǎn)
*/

// 注意：如果省略拖動(dòng)點(diǎn)，默認(rèn)可拖動(dòng)的區(qū)域是整個(gè)被拖動(dòng)元素

以上就是小編為大家?guī)?lái)的自己封裝的一個(gè)原生JS拖動(dòng)方法(推薦)全部?jī)?nèi)容了，希望大家多多支持腳本之家~

相關(guān)文章

最新評(píng)論