js 拖动层 限制位置
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
</style>
<script type="text/javascript">
var a;
document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};
document.onmousemove=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";};
function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}
</script>
</head>
<body>
<div id="main">
<div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div>
</div>
</body>
</html>
请问各路高手，怎样把层限制在一定范围内啊，这个是全屏都能拖得。 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
</style>
<script type="text/javascript">
var a;
document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};
document.onmousemove=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";};
function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}
</script>
</head>
<body>
<div id="main">
<div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div>
</div>
</body>
</html>
请问各路高手，怎样把层限制在一定范围内啊，这个是全屏都能拖得。 展开
2个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div
{
position: absolute;
width: 220px;
height: 150px;
border: 1px solid #999;
}
</style>
<script type="text/javascript">
var a;
document.onmouseup = function() {
if (!a) return;
document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
a = "";
};
document.onmousemove = function(d) {
if (!a) return;
if (!d) d = event;
//a.style.left = (d.clientX - b > 300 && d.clientX - b < 600 ? (d.clientX - b) + "px" : "300px");
//a.style.top = (d.clientY - c > 300 && d.clientY - c < 600 ? (d.clientY - c) + "px" : "300px");
if(d.clientX - b > 300)
{
if(d.clientX - b<600)
{
a.style.left=(d.clientX - b) + "px";
}
else{
a.style.left="600px"
}
}
else{
a.style.left="300px";
}
if(d.clientY - c > 300)
{
if(d.clientY - c<600)
{
a.style.top=(d.clientY - c) + "px";
}
else{
a.style.top="600px"
}
}
else{
a.style.top="300px";
}
};
function $(o, e) {
a = o;
document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
b = e.clientX - parseInt(a.style.left);
c = e.clientY - parseInt(a.style.top);
}
</script>
</head>
<body>
<div id="main">
<div style="left: 300px; top: 300px; background: #fc9; z-index:10;" onmousedown="$(this,event)">
</div>
</div>
<div style="background-color:Yellow; position:absolute; top:300px; left:300px; width:520px; height:450px; z-index:0; ">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#main div
{
position: absolute;
width: 220px;
height: 150px;
border: 1px solid #999;
}
</style>
<script type="text/javascript">
var a;
document.onmouseup = function() {
if (!a) return;
document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
a = "";
};
document.onmousemove = function(d) {
if (!a) return;
if (!d) d = event;
//a.style.left = (d.clientX - b > 300 && d.clientX - b < 600 ? (d.clientX - b) + "px" : "300px");
//a.style.top = (d.clientY - c > 300 && d.clientY - c < 600 ? (d.clientY - c) + "px" : "300px");
if(d.clientX - b > 300)
{
if(d.clientX - b<600)
{
a.style.left=(d.clientX - b) + "px";
}
else{
a.style.left="600px"
}
}
else{
a.style.left="300px";
}
if(d.clientY - c > 300)
{
if(d.clientY - c<600)
{
a.style.top=(d.clientY - c) + "px";
}
else{
a.style.top="600px"
}
}
else{
a.style.top="300px";
}
};
function $(o, e) {
a = o;
document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
b = e.clientX - parseInt(a.style.left);
c = e.clientY - parseInt(a.style.top);
}
</script>
</head>
<body>
<div id="main">
<div style="left: 300px; top: 300px; background: #fc9; z-index:10;" onmousedown="$(this,event)">
</div>
</div>
<div style="background-color:Yellow; position:absolute; top:300px; left:300px; width:520px; height:450px; z-index:0; ">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这里有一个可以限制拖动范围的拖动效果
你可以参考一下
你可以参考一下
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?9=j&id=12284
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
