javascript 像windows窗体移动操作，鼠标按下左键选中第二div后，随鼠标移动位置，释放左键，div停止移动
谢谢<script>window.onmousedown=function(event){varb=document.getElementById('_this');b....
谢谢
<script>
window.onmousedown=function(event){
var b=document.getElementById('_this');
b.style.width='100px';
b.style.height='10px';
b.style.position='absolute';
var d= event.pageX ;
var e=event.pageY;
b.style.left=parseInt(d+10)+"px";
b.style.top=parseInt(e+10)+"px";
}
</script>
<div>不是获取我</div>
<div id="_this">
<span>
来获取我的内容
</span>
</div> 展开
<script>
window.onmousedown=function(event){
var b=document.getElementById('_this');
b.style.width='100px';
b.style.height='10px';
b.style.position='absolute';
var d= event.pageX ;
var e=event.pageY;
b.style.left=parseInt(d+10)+"px";
b.style.top=parseInt(e+10)+"px";
}
</script>
<div>不是获取我</div>
<div id="_this">
<span>
来获取我的内容
</span>
</div> 展开
1个回答
展开全部
可以看看这个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#win{position:absolute;top:40%;left:33%;width:400px;height:33px;background:#fc0;cursor:move;}
#win1{position:absolute;top:59%;left:59%;width:400px;height:33px;background:#fc0;cursor:move;}
</style>
</header>
<body>
<script>
window.onload = function ()
{
var oWin = document.getElementById("win");
var bDrag = false;
var disX = disY = 0;
oWin.onmousedown = function (event){
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
return false
};
document.onmousemove = function (event){
if (!bDrag)
return;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
//把图层范围定在浏览器窗口内
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = function (){
bDrag = false;
};
};
</script>
</head>
<body>
<div id="win">0</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>拖拽</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#win{position:absolute;top:40%;left:33%;width:400px;height:33px;background:#fc0;cursor:move;}
#win1{position:absolute;top:59%;left:59%;width:400px;height:33px;background:#fc0;cursor:move;}
</style>
</header>
<body>
<script>
window.onload = function ()
{
var oWin = document.getElementById("win");
var bDrag = false;
var disX = disY = 0;
oWin.onmousedown = function (event){
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
disY = event.clientY - oWin.offsetTop;
return false
};
document.onmousemove = function (event){
if (!bDrag)
return;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
//把图层范围定在浏览器窗口内
var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
var maxT = document.documentElement.clientHeight - oWin.offsetHeight;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px";
oWin.style.top = iT + "px";
return false
};
document.onmouseup = function (){
bDrag = false;
};
};
</script>
</head>
<body>
<div id="win">0</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
