100分真心求div 随便移动代码
日期：2014-05-16 浏览次数：20358 次
100分真心求div 任意移动代码
目前遇到一个问题就是 div 任意移动。
要求 例如： html 代码
要求 content 的div 内容默认是不显示的 ，只显示 dragHeader 的内容 鼠标可以拖动 div content 的内容到任意div 位置，并显示出来。而且能够拖回去。。。。。 请各位大侠 指点 100分 奉上~~~~
------解决方案--------------------
不知道有沒有理解錯，請試一下：
<!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>
<title> New Document </title>
<style type="text/css">
#test{position:absolute;left:10px;top:30px;background:#fc9; cursor:move;width:120px;height:50px;border:1px solid #999;display:none}
#test1{position:absolute;left:10px;top:130px;background:#9fc;cursor:move;width:120px;height:50px;border:1px solid #999;display:none}
</style>
<script type="text/javascript">
function lin1(){
document.getElementById("test").style.display='block';
}
function lin2(){
document.getElementById("test1").style.display='block';
}
</script>
<script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=new Function("drag_=false");
}
}
</script>
</head>
<body>
<div style="height: 100px; width: 200px;" class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float: left" onclick="lin1();">
姓名</div>
</div>
<div id="test" onmouseover='Move_obj("test")' class="content">
<input type="button" value="查看" /></div>
</div>
</body>
</html>
<div style="height: 100px; width: 200px;" class="dragLayer" id="win2">
<div class="dragHeader&
目前遇到一个问题就是 div 任意移动。
要求 例如： html 代码
- HTML code
<div style="height: 100px; width: 200px;" class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float: left">
姓名</div>
</div>
<div class="content">
<input type="button" value="查看" /></div>
</div>
<div style="height: 100px; width: 200px;" class="dragLayer" id="win2">
<div class="dragHeader">
<div style="float: left">
性别</div>
</div>
<div class="content">
<input type="radio" value="测试" />
</div>
</div>
要求 content 的div 内容默认是不显示的 ，只显示 dragHeader 的内容 鼠标可以拖动 div content 的内容到任意div 位置，并显示出来。而且能够拖回去。。。。。 请各位大侠 指点 100分 奉上~~~~
------解决方案--------------------
不知道有沒有理解錯，請試一下：
<!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>
<title> New Document </title>
<style type="text/css">
#test{position:absolute;left:10px;top:30px;background:#fc9; cursor:move;width:120px;height:50px;border:1px solid #999;display:none}
#test1{position:absolute;left:10px;top:130px;background:#9fc;cursor:move;width:120px;height:50px;border:1px solid #999;display:none}
</style>
<script type="text/javascript">
function lin1(){
document.getElementById("test").style.display='block';
}
function lin2(){
document.getElementById("test1").style.display='block';
}
</script>
<script language="JavaScript" type="text/javascript">
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=new Function("drag_=false");
}
}
</script>
</head>
<body>
<div style="height: 100px; width: 200px;" class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float: left" onclick="lin1();">
姓名</div>
</div>
<div id="test" onmouseover='Move_obj("test")' class="content">
<input type="button" value="查看" /></div>
</div>
</body>
</html>
<div style="height: 100px; width: 200px;" class="dragLayer" id="win2">
<div class="dragHeader&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
