目前遇到一个问题就是 div 任意移动。
要求 例如： html 代码 <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分 奉上~~~~
要求 例如： html 代码 <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分 奉上~~~~
或者 jquery ui 的
http://jqueryui.com/demos/draggable/
Extjs的window控件很适合用,有标题栏可以任意拖动,支持收起\展开(收起后只显示标题栏,完全是你想要的效果),还可以改变大小,隐藏,关闭,动画效果等等功能.
学着用一下吧,比你自己写的要好得多
<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>
<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>
这样试试
姓名</div> 内容显示 dov 下 content 的内容 拖回去的时候 再隐藏起来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> js</title>
<style>
#idContainer{ border:10px solid #990000; width:600px; height:300px;}
#idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; top:50px; left:50px;}
#idHandle{cursor:move; height:25px; background:#0000FF; overflow:hidden;}
</style>
<script type="text/javascript">
//判断ie
var isIE = (document.all) ? true : false;
//获取ID
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
//初始化控件
var Class = {
create : function(){
return function(){ this.initialize.apply(this,arguments);};
}
};
//属性继承
var Extend = function(destination,source){
for(var property in source){
destination[property] = source[property];
}
}
//方法绑定
var Bind = function(object,fun){
return function(){
return fun.apply(object,arguments);
}
}
//绑定事件
var BindAsEventListener = function(object,fun){
return function(event){
return fun.call(object,(event || window.event));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element,null);
}
//添加监听事件
function addEventHandler(sTarget,type,fun){
if(sTarget.addEventListener){
sTarget.addEventListener(type,fun,false);
}else if(sTarget.attachEvent){
sTarget.attachEvent("on" + type,fun);
}else{
sTarget["on" + type] = fun;
}
}
//移除监听事件
function removeEventHandler(sTarget,type,fun){
if(sTarget.removeEventListener){
sTarget.removeEventListener(type,fun,false);
}else if(sTarget.detachEvent){
sTarget.detachEvent("on" + type,fun);
}else{
sTarget["on" + type] = null;
}
}
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//初始化
initialize : function(drag,options){
this.Drag = $(drag); //拖放对象
this._x = this._y = 0; //记录鼠标相对当前拖放位置
this._marginLeft = this._marginTop = 0; //记录margin
//事件对象
this._fM = BindAsEventListener(this,this.Move);
this._fS = Bind(this,this.Stop); this.SetOptions(options);
this.Limit = !!this.options.Limit;
this.mxLeft = parseInt(this.options.mxLeft);
this.mxRight = parseInt(this.options.mxRight);
this.mxTop = parseInt(this.options.mxTop);
this.mxBottom = parseInt(this.options.mxBottom);
/*
this.LockX = !!this.options.LockX;
this.LockY = !!this.options.LockY;
this.Lock = !!this.options.Lock; */
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop; this._Handle = $(this.options.Handle) || this.Drag;
this._mxContainer = $(this.options.mxContainer) || null; this.Drag.style.position = "absolute";
//范围修正
this.Repair();
//鼠标落下触发
addEventHandler(this._Handle,"mousedown",BindAsEventListener(this,this.Start)); },
//设置默认属性
SetOptions : function(options){
this.options = {
Handle : "", //触发对象
Limit : false, //限制
mxLeft : 0, //左侧限制
mxRight : 9999, //右侧限制
mxTop : 0, //上侧限制
mxBottom : 9999, //下侧限制
mxContainer : "", //指定限制在容器内
// LockX : false, //是否锁定水平方向拖放
// LockY : false, //是否锁定垂直方向拖放
onStart : function(){}, //开始移动时执行
onMove : function(){}, //移动时执行
onStop : function(){} //移动结束执行
}
Extend(this.options,options || {});
},
//准备拖动
Start : function(e){
//if(this.Lock){return;}
this.Repair();
//记录鼠标相对拖放对象的位置
this._x = e.clientX - this.Drag.offsetLeft;
this._y = e.clientY - this.Drag.offsetTop;
//记录margin
//this._marginLeft =
addEventHandler(document,"mousemove",this._fM);
addEventHandler(document,"mouseup",this._fS);
this.onStart();
},
//范围修正
Repair : function(){
if(this.Limit){
this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
//如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
}
},
//拖动
Move : function(e){
//if(this.Lock){this.Stop();return;}
//清除选择
//window.getSelection ? window.getSelection().removeArrRange() : document.selection.empty();
//设置移动参数
var iLeft = e.clientX - this._x, iTop = e.clientY - this._y;
//设置范围限制
if(this.Limit){
//设置范围参数
var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
//如果设置了容器，再修正范围参数
if(!!this._mxContainer){
mxLeft = Math.max(mxLeft,0);
mxTop = Math.max(mxTop,0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
}
//修正移动参数
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth),mxLeft);
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight),mxTop);
}
//设置位置，并修正margin
this.Drag.style.left = iLeft - this._marginLeft + "px";
this.Drag.style.top = iTop - this._marginTop + "px";
//附加程序
this.onMove();
},
//停止拖动
Stop : function (){
//移除时间
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup" , this._fS);
this.onStop();
}
}
</script>
</head> <body>
<div id="idContainer">
<div id="idDrag"> <div id="idHandle"> </div> </div>
</div>
<br />拖放状态： <span id="idShow">未开始 </span>
<script type="text/javascript">
var drag = new Drag("idDrag", {mxContainer : "idContainer", Handle : "idHandle", Limit: true,
onStart : function(){ $("idShow").innerHTML="开始拖放";},
onMove : function(){$("idShow").innerHTML ="left: "+this.Drag.offsetLeft+"; top:"+this.Drag.offsetTop},
onStop : function(){$("idShow").innerHTML = "结束拖放";}
});
</script>
</body>
</html>
简化版的
楼主看下这个吧