限定范围拖拽
目录
代码实例
* {
padding:0;
margin:0;
}
width:500px;
height:500px;
background:
position: relative;
left:100px;
top:100px;
}
width:100px;
height:100px;
background:
position: absolute;
cursor: move;
}
<div id="box1">
<div id="box"></div>
</div>
(function() {var dragging =falsevar boxX, boxY, mouseX, mouseY, offsetX, offsetYvar box = document.getElementById('box')var box1 = document.getElementById('box1')
box.onmousedown = down
document.onmousemove = move
document.onmouseup = upfunctiondown(e) {
dragging =true
boxX = box.offsetLeft
boxY = box.offsetTop
mouseX = parseInt(getMouseXY(e).x)
mouseY = parseInt(getMouseXY(e).y)
offsetX = mouseX - boxX
offsetY = mouseY - boxY
}functionmove(e){if (dragging) {var x = getMouseXY(e).x - offsetXvar y = getMouseXY(e).y - offsetYvar width = box1.clientWidth - box.offsetWidthvar height = box1.clientHeight - box.offsetHeight
x = Math.min(Math.max(0, x), width)
y = Math.min(Math.max(0, y), height)
box.style.left = x +'px'
box.style.top = y +'px'
}
}functionup(e){
dragging =false
}functiongetMouseXY(e){var x =0, y =0
e = e || window.eventif (e.pageX) {
x = e.pageX
y = e.pageY
}else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}return {
x: x,
y: y
}
}
})()
与简易拖拽的差异
简易拖拽的链接
简易拖拽
可移动位置的改变
// 此处就是父元素的宽度减去子元素宽度
var width = box1.clientWidth - box.offsetWidth
var height = box1.clientHeight - box.offsetHeight
下载源码链接
星辉的Github