承上:页面内拖拽方框
之前是在整个html文档中拖动div块,现在给div块加一个父级div,在父级div中拖动子div,如下:
仅需在之前的基础上修改if判断语句中的可视区宽度。
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
if (l<30) {
l = 0;
} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
l = oDiv2.offsetWidth-oDiv1.offsetWidth;
}//div块不超出左右两边,oDiv2.offsetWidth是div2可视区的宽度
if (t<30) {
t = 0;
} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
t = oDiv2.offsetHeight-oDiv1.offsetHeight;
}//div块不超出上下两边,oDiv2.offsetHeight是div2可视区的高度
oDiv1.style.left = l + 'px';
oDiv1.style.top = t + 'px';
};
完整实例:
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
#div1{ height: 100px; width: 100px; background-color: red; position: absolute; }
#div2{ height: 600px; width: 800px; background-color: gray; position: relative; }
</style>
<script type="text/javascript">
window.onload = function(){
document.oncontextmenu = function(){
return false;
}
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var disX = 0;
var disY = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
disY = ev.clientY - oDiv1.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
if (l<30) {
l = 0;
} else if(l>oDiv2.offsetWidth-oDiv1.offsetWidth){
l = oDiv2.offsetWidth-oDiv1.offsetWidth;
}//div块不超出左右两边,oDiv2.offsetWidth是div2可视区的宽度
if (t<30) {
t = 0;
} else if(t>oDiv2.offsetHeight-oDiv1.offsetHeight){
t = oDiv2.offsetHeight-oDiv1.offsetHeight;
}//div块不超出上下两边,oDiv2.offsetHeight是div2可视区的高度
oDiv1.style.left = l + 'px';
oDiv1.style.top = t + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};
</script>
</head>
<body>ajsoigjiagioanreihirea
<div id="div2">
jloajosjog[adgoiaog]
<div id="div1"></div>
</div>
</body>
</html>
最后加上一个return false语句,可以解决页面内拖动时选中文字的问题。
下面if判断是为了增加吸附功能,当div1靠近div2的边框距离小于30个像素时,直接将距离置为零。