分享一个原生的JavaScript拖动方法

代码：

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': ''; //重置<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认位置。
(resultY >= maxHeight)?  target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认位置。

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+'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.<a href="https://www.jb51.cc/tag/onmouseup/" target="_blank" class="keywords">onmouseup</a>=function(){  // <a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>拖动时，当鼠标指向的DOM对象非拖动点元素时，无法触发拖动点的onmousedown的BUG。
  document.onmousemove = null;  
  point.releaseCapture && point.releaseCapture();  // 将Mouse事件从指定元素上移除。
};
point.<a href="https://www.jb51.cc/tag/onmouseup/" target="_blank" class="keywords">onmouseup</a>=function(e){
  var e = e || window.event;
  document.onmousemove = null;
  point.releaseCapture && point.releaseCapture();
};

}
core();
window.onresize = core;
}

使用方式：

rush:js;"> drag(t,p) /* * 说明 * t 表示被拖动的元素 * p 表示拖动点 */

// 注意：如果省略拖动点，默认可拖动的区域是整个被拖动元素

原文地址：https://www.jb51.cc/js/45590.html