Home > Web Front-end > JS Tutorial > body text

A native JS drag method encapsulated by yourself (recommended)

高洛峰
Release: 2016-12-05 17:24:39
Original
1324 people have browsed it

Code:

function drag(t,p){
 
  var point = p || null,
    target = t || null,
    resultX = 0,
    resultY = 0;
 
  (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素
 
  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': ''; //重置默认位置。
    (resultY >= maxHeight)?  target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。
 
    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); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
        resultY = moveY - (coordY - posY);
 
        (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+&#39;px&#39; : target.style.left = maxWidth+&#39;px&#39;) : target.style.left = &#39;0px&#39;; 
        (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+&#39;px&#39; : target.style.top = maxHeight+&#39;px&#39;) : target.style.top = &#39;0px&#39;; 
 
        ev.stopPropagation && ev.stopPropagation(); 
        ev.preventDefault;
        ev.returnValue = false;
        ev.cancelBubble = true;
      };
    };
    document.onmouseup=function(){  // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的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;  
}
Copy after login

Usage:

drag(t,p)
/* 
 * 说明 
 * t 表示被拖动的元素
 * p 表示拖动点
*/
 
// 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
Copy after login


Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template