JS实现窗口固定范围的拖动 不要任意拖动的！~
1个回答
展开全部
我限制的是浏览器的四个边，你可以根据需要修改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0038)http://js.fgm.cc/learn/lesson6/01.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>完美拖拽</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<STYLE type=text/css>HTML {
OVERFLOW: hidden
}
BODY {
OVERFLOW: hidden
}
BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H2 {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
P {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
FONT: 12px/2 Arial; BACKGROUND: #000; COLOR: #fff
}
P {
PADDING-BOTTOM: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
SPAN {
PADDING-LEFT: 5px; COLOR: #ff0
}
#box {
BORDER-BOTTOM: #ccc 2px solid; POSITION: absolute; BORDER-LEFT: #ccc 2px solid; MARGIN: -75px 0px 0px -150px; WIDTH: 300px; BACKGROUND: #333; HEIGHT: 150px; BORDER-TOP: #ccc 2px solid; TOP: 50%; BORDER-RIGHT: #ccc 2px solid; LEFT: 50%
}
#box H2 {
BORDER-BOTTOM: #ccc 2px solid; TEXT-ALIGN: right; PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #222; HEIGHT: 25px; CURSOR: move; PADDING-TOP: 0px
}
#box H2 A {
OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; FONT: 12px/25px Arial; COLOR: #fff; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT type=text/javascript>
window.onload=function ()
{
var oBox=document.getElementById("box");
var oH2 = oBox.getElementsByTagName("h2")[0];
var oA = oBox.getElementsByTagName("a")[0];
var aSpan = oBox.getElementsByTagName("span");
var disX = disY = 0;
var bDrag = false;
var aX = [oBox.offsetLeft];
var aY = [oBox.offsetTop];
//鼠标按下, 激活拖拽
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oBox.offsetLeft;
disY = event.clientY - oBox.offsetTop;
this.setCapture && this.setCapture();
return false
};
//拖拽开始
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oBox.style.marginTop = oBox.style.marginLeft = 0;
oBox.style.left = iL + "px";
oBox.style.top = iT + "px";
aX.push(iL);
aY.push(iT);
status();
return false
};
//鼠标释放, 结束拖拽
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
status()
};
//回放拖动轨迹
oA.onclick = function ()
{
if(aX.length == 1) return;
var count = aX.length - 1;
var timer = setInterval(function ()
{
oBox.style.left = aX[count] + "px";
oBox.style.top = aY[count] + "px";
count--;
count < 0 && (clearInterval(timer),aX.length = aY.length = 1);
status()
},30);
this.focus = false;//去除链接虚线
return false
};
//阻止冒泡
oA.onmousedown = function (event)
{
(event || window.event).cancelBubble = true
};
//监听状态函数
function status ()
{
aSpan[0].innerHTML = bDrag;
aSpan[1].innerHTML = oBox.offsetTop;
aSpan[2].innerHTML = oBox.offsetLeft
}
//初始调用
status()
};
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.6001.19088"></HEAD>
<BODY>
<DIV id=box>
<H2><A href="javascript:;">点击回放拖动轨迹</A></H2>
<P><STRONG>Drag:</STRONG><SPAN></SPAN></P>
<P><STRONG>offsetTop:</STRONG><SPAN></SPAN></P>
<P><STRONG>offsetLeft:</STRONG><SPAN></SPAN></P></DIV></BODY></HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0038)http://js.fgm.cc/learn/lesson6/01.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>完美拖拽</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<STYLE type=text/css>HTML {
OVERFLOW: hidden
}
BODY {
OVERFLOW: hidden
}
BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H2 {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
P {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
FONT: 12px/2 Arial; BACKGROUND: #000; COLOR: #fff
}
P {
PADDING-BOTTOM: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
SPAN {
PADDING-LEFT: 5px; COLOR: #ff0
}
#box {
BORDER-BOTTOM: #ccc 2px solid; POSITION: absolute; BORDER-LEFT: #ccc 2px solid; MARGIN: -75px 0px 0px -150px; WIDTH: 300px; BACKGROUND: #333; HEIGHT: 150px; BORDER-TOP: #ccc 2px solid; TOP: 50%; BORDER-RIGHT: #ccc 2px solid; LEFT: 50%
}
#box H2 {
BORDER-BOTTOM: #ccc 2px solid; TEXT-ALIGN: right; PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #222; HEIGHT: 25px; CURSOR: move; PADDING-TOP: 0px
}
#box H2 A {
OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; FONT: 12px/25px Arial; COLOR: #fff; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT type=text/javascript>
window.onload=function ()
{
var oBox=document.getElementById("box");
var oH2 = oBox.getElementsByTagName("h2")[0];
var oA = oBox.getElementsByTagName("a")[0];
var aSpan = oBox.getElementsByTagName("span");
var disX = disY = 0;
var bDrag = false;
var aX = [oBox.offsetLeft];
var aY = [oBox.offsetTop];
//鼠标按下, 激活拖拽
oH2.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oBox.offsetLeft;
disY = event.clientY - oBox.offsetTop;
this.setCapture && this.setCapture();
return false
};
//拖拽开始
document.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oBox.style.marginTop = oBox.style.marginLeft = 0;
oBox.style.left = iL + "px";
oBox.style.top = iT + "px";
aX.push(iL);
aY.push(iT);
status();
return false
};
//鼠标释放, 结束拖拽
document.onmouseup = window.onblur = oH2.onlosecapture = function ()
{
bDrag = false;
oH2.releaseCapture && oH2.releaseCapture();
status()
};
//回放拖动轨迹
oA.onclick = function ()
{
if(aX.length == 1) return;
var count = aX.length - 1;
var timer = setInterval(function ()
{
oBox.style.left = aX[count] + "px";
oBox.style.top = aY[count] + "px";
count--;
count < 0 && (clearInterval(timer),aX.length = aY.length = 1);
status()
},30);
this.focus = false;//去除链接虚线
return false
};
//阻止冒泡
oA.onmousedown = function (event)
{
(event || window.event).cancelBubble = true
};
//监听状态函数
function status ()
{
aSpan[0].innerHTML = bDrag;
aSpan[1].innerHTML = oBox.offsetTop;
aSpan[2].innerHTML = oBox.offsetLeft
}
//初始调用
status()
};
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.6001.19088"></HEAD>
<BODY>
<DIV id=box>
<H2><A href="javascript:;">点击回放拖动轨迹</A></H2>
<P><STRONG>Drag:</STRONG><SPAN></SPAN></P>
<P><STRONG>offsetTop:</STRONG><SPAN></SPAN></P>
<P><STRONG>offsetLeft:</STRONG><SPAN></SPAN></P></DIV></BODY></HTML>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
