100分真心求div 任意移动代码
目前遇到一个问题就是 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">
<div style="float: left" onclick="lin2();">
性别</div>
</div>
<div id="test1" class="content" onmouseover='Move_obj("test1")'>
<input type="radio" value="测试" />
</div>
</div>
[解决办法]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function Div(){
this.ismove=0;
this.x=0;
this.y=0;
this.div=document.createElement("div");
this.div.style.position="absolute";
this.div.style.left="0px";
this.div.style.top="0px";
this.div.style.height="200px";
this.div.style.width="200px";
this.div.style.backgroundColor="red";
this.div.onmousemove=this.move.bind(this);
this.div.onmousedown=this.start.bind(this);
this.div.onmouseup=this.end.bind(this);
document.body.appendChild(this.div);
}
Div.prototype.start=function(e){
var a=e||window.event;
this.ismove=1;
this.x=parseInt(a.clientX)-parseInt(this.div.style.left);
this.y=parseInt(a.clientY)-parseInt(this.div.style.top);
}
Div.prototype.end=function(){
this.ismove=false;
}
Div.prototype.move=function(e){
if(this.ismove){
var a=e||window.event;
this.div.style.left=parseInt(a.clientX)-this.x+"px";
this.div.style.top=parseInt(a.clientY)-this.y+"px";
}
}
function add(){
new Div();
}
</script>
</head>
<body>
<input type="button" onclick="add()" value="add">
</body>
</html>
这样试试
[解决办法]
http://www.chhblog.com/Web/DemoView.aspx?DemoID=29
楼主看下这个吧
[解决办法]
给个思路：根据drag event，先获取div当前的坐标(event.x,event.y),然后拖动结束时坐标拿到，然后改变这个div的位置就行了