原生js 封装 拖拽限制范围

<div id="div1"></div>
<div id="div2"></div>

 

window.onload = function() {

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

drag(div1);
drag(div2);

}

function drag(obj) {
obj.onmousedown = function(ev) {
var e = ev || event;
var disX = e.clientX - this.offsetLeft;
var disY = e.clientY - this.offsetTop;

if (obj.setCapture) {
obj.setCapture();
}

document.onmousemove = function(ev) {
var e = ev || event;

var L = e.clientX - disX;
var T = e.clientY - disY;

if (L < 0) {
L = 0;
} else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if (T < 0) {
T = 0;
} else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
T = document.documentElement.clientHeight - obj.offsetHeight;
}

obj.style.left = L + 'px';
obj.style.top = T + 'px';
}

document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if (obj.releaseCapture) {
obj.releaseCapture();
}
}

return false;
}
}

转载于:https://www.cnblogs.com/tritri/p/5042919.html