87,910
社区成员
发帖
与我相关
我的任务
分享z-index
比如我写了一个drag类
可以创建很多的drag实例
我希望了点任何一个实例了 他的zindex会最大 就是显示在最前面
我想的方法了就是定义一个全局变量
每次点实例的时候 就+1在给那个实例
觉得这个方法不好
各位大虾给点意见吧！~
可以创建很多的drag实例
我希望了点任何一个实例了 他的zindex会最大 就是显示在最前面
我想的方法了就是定义一个全局变量
每次点实例的时候 就+1在给那个实例
觉得这个方法不好
各位大虾给点意见吧！~
...全文
请发表友善的回复…
发表回复
veslen 2009-06-05
- 打赏
- 举报
学习学习
wtcsy 2009-06-05
- 打赏
- 举报
上面的代码不对
看这个
设置zindex的地方在注释后面打========号！
看这个
设置zindex的地方在注释后面打========号！
<!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=gb2312" />
<title>Dialog</title>
<style type="text/css">
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
.dialogbody{ height:374px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
bottom:1px; right:1px;cursor:nw-resize;
position:absolute;
background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
background-position:-42px -10px;
width:10px;
height:10px;
font-size:0;}
</style>
</head>
<body >
<input value="创建" type="button" onclick="creat()" />
<script>
var z=1,i=1,left=10
var isIE = (document.all) ? true : false;
var $ = function (id) {
return document.getElementById(id);
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun,args) {
return function() {
return fun.apply(object,args||[]);
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Dialog = new Class({
options:{
Width : 400,
Height : 400,
Left : 100,
Top : 100,
Titleheight : 26,
Minwidth : 200,
Minheight : 200,
CancelIco : true,
ResizeIco : false,
Info : "新闻标题",
Content : "无内容",
Zindex : 2
},
initialize:function(options){
this._dragobj = null;
this._resize = null;
this._cancel = null;
this._body = null;
this._x = 0;
this._y = 0;
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this._isdrag = null;
this._Css = null;
////////////////////////////////////////////////////////////////////////////////
this.Width = this.options.Width;
this.Height = this.options.Height;
this.Left = this.options.Left;
this.Top = this.options.Top;
this.CancelIco = this.options.CancelIco;
this.Info = this.options.Info;
this.Content = this.options.Content;
this.Minwidth = this.options.Minwidth;
this.Minheight = this.options.Minheight;
this.Titleheight= this.options.Titleheight;
this.Zindex = this.options.Zindex;
Extend(this,options);
//////////////////////////////////////////////////////////////////////////////// 构造dialog
var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];
for(var i = 0;i<obj.length;i++)
{ obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
obj[2].innerHTML = this.Info;
obj[4].innerHTML = this.Content;
obj[1].appendChild(obj[2]);
obj[1].appendChild(obj[3]);
obj[0].appendChild(obj[1]);
obj[0].appendChild(obj[4]);
obj[0].appendChild(obj[5]);
document.body.appendChild(obj[0]);
this._dragobj = obj[0];
this._resize = obj[5];
this._cancel = obj[3];
this._body = obj[4];
////////////////////////////////////////////////////////////////////////////////o,x1,x2
////设置Dialog的长 宽 ,left ,top
this._dragobj.style.width = this.Width +"px";
this._dragobj.style.height = this.Height + "px";
this._dragobj.style.top = this.Top + "px";
this._dragobj.style.left = this.Left + "px";
this._body.style.height = this.Height - this.Titleheight +'px';
this._dragobj.style.zIndex = this.Zindex;
/////////////////////////////////////////////////////////////////////////////// 添加事件
addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));
addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));
addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));
addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
},
Disappear:function(e){
this.Cancelbubble(e);
document.body.removeChild(this._dragobj);
},
Cancelbubble:function(e){
this._dragobj.style.zIndex = ++z; //================
document.all?(e.cancelBubble=true):(e.stopPropagation())
},
Changebg:function(o,x1,x2){
o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1;
},
Start:function(e,isdrag){
if(!isdrag){this.Cancelbubble(e);}
this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"}
this._dragobj.style.zIndex = ++z;//=====================
this._isdrag = isdrag;
this._x = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
this._y = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
if(isIE)
{
addListener(this._dragobj, "losecapture", this._fS);
this._dragobj.setCapture();
}
else
{
e.preventDefault();
addListener(window, "blur", this._fS);
}
addListener(document,'mousemove',this._fM)
addListener(document,'mouseup',this._fS)
},
Move:function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px';
this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px'
if(!this._isdrag)
this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)+'px';
},
Stop:function(){
removeListener(document,'mousemove',this._fM);
removeListener(document,'mouseup',this._fS);
if(isIE)
{
removeListener(this._dragobj, "losecapture", this._fS);
this._dragobj.releaseCapture();
}
else
{
removeListener(window, "blur", this._fS);
};
}
})
new Dialog({Width:300,Height:300,Left:300,Top:300});
new Dialog({Info:"人族",Content:"人族很强吗?"});
function creat(){
new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:++z});
i++;left +=10;
}
</script>
</body>
</html>wtcsy 2009-06-05
- 打赏
- 举报
你的写法跟我的有点不同
你这个就是一个对象 点击后只会对这个对象产生影响
我的是一个拖动的元素就是一个对象 且是封装好了的 代码如下：
设置zindex大小的在注释后打了====号 你看看该怎么修改
点这里直接看
你这个就是一个对象 点击后只会对这个对象产生影响
我的是一个拖动的元素就是一个对象 且是封装好了的 代码如下：
设置zindex大小的在注释后打了====号 你看看该怎么修改
点这里直接看
<!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=gb2312" />
<title>Dialog</title>
<style type="text/css">
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
.dialogbody{ height:374px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
bottom:1px; right:1px;cursor:nw-resize;
position:absolute;
background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
background-position:-42px -10px;
width:10px;
height:10px;
font-size:0;}
</style>
</head>
<body >
<input value="创建" type="button" onclick="creat()" />
<script>
var z=1,i=1,left=10
var isIE = (document.all) ? true : false;
var $ = function (id) {
return document.getElementById(id);
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun,args) {
return function() {
return fun.apply(object,args||[]);
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Dialog = new Class({
options:{
Width : 400,
Height : 400,
Left : 100,
Top : 100,
Titleheight : 26,
Minwidth : 200,
Minheight : 200,
CancelIco : true,
ResizeIco : false,
Info : "新闻标题",
Content : "无内容",
Zindex : 2
},
initialize:function(options){
this._dragobj = null;
this._resize = null;
this._cancel = null;
this._body = null;
this._x = 0;
this._y = 0;
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this._isdrag = null;
////////////////////////////////////////////////////////////////////////////////
this.Width = this.options.Width;
this.Height = this.options.Height;
this.Left = this.options.Left;
this.Top = this.options.Top;
this.CancelIco = this.options.CancelIco;
this.Info = this.options.Info;
this.Content = this.options.Content;
this.Minwidth = this.options.Minwidth;
this.Minheight = this.options.Minheight;
this.Titleheight= this.options.Titleheight;
this.Zindex = this.options.Zindex;
Extend(this,options);
////////////////////////////////////////////////////////////////////////////////
var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];
for(var i = 0;i<obj.length;i++)
{ obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
obj[2].innerHTML = this.Info;
obj[4].innerHTML = this.Content;
obj[1].appendChild(obj[2]);
obj[1].appendChild(obj[3]);
obj[0].appendChild(obj[1]);
obj[0].appendChild(obj[4]);
obj[0].appendChild(obj[5]);
document.body.appendChild(obj[0]);
this._dragobj = obj[0];
this._resize = obj[5];
this._cancel = obj[3];
this._body = obj[4];
////////////////////////////////////////////////////////////////////////////////o,x1,x2
////设置Dialog的长 宽 ,left ,top
this._dragobj.style.width = this.Width +"px";
this._dragobj.style.height = this.Height + "px";
this._dragobj.style.top = this.Top + "px";
this._dragobj.style.left = this.Left + "px";
this._body.style.height = this.Height - this.Titleheight +'px';
this._dragobj.style.zIndex = this.Zindex;
///////////////////////////////////////////////////////////////////////////////
addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));//BindAsEventListener(this, this.Start, fun)
addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));
addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));
addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
},
Disappear:function(e){
this.Cancelbubble(e);
document.body.removeChild(this._dragobj);
},
Cancelbubble:function(e){
this._dragobj.style.zIndex = ++z; //===========
document.all?(e.cancelBubble=true):(e.stopPropagation())
},
Changebg:function(o,x1,x2){
o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1;
},
Start:function(e,isdrag){
if(!isdrag){this.Cancelbubble(e);}
this._dragobj.style.zIndex = ++z; //==============
this._isdrag = isdrag;
this._x = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
this._y = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
if(isIE)
{
addListener(this._dragobj, "losecapture", this._fS);
this._dragobj.setCapture();
}
else
{
e.preventDefault();
addListener(window, "blur", this._fS);
}
addListener(document,'mousemove',this._fM)
addListener(document,'mouseup',this._fS)
},
Move:function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
if(this._isdrag)
{
this._dragobj.style.left = Math.max(i_x,0) + "px";
this._dragobj.style.top = Math.max(i_y,0) + "px";
}
else
{
this._dragobj.style.width = Math.max(i_x,this.Minwidth) + 'px';//
this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)+'px';
this._dragobj.style.height = Math.max(i_y,this.Minheight) + 'px';
}
},
Stop:function(){
removeListener(document,'mousemove',this._fM);
removeListener(document,'mouseup',this._fS);
if(isIE)
{
removeListener(this._dragobj, "losecapture", this._fS);
this._dragobj.releaseCapture();
}
else
{
removeListener(window, "blur", this._fS);
};
}
})
new Dialog({Width:300,Height:300,Left:300,Top:300});
new Dialog({Info:"人族",Content:"人族很强吗?"});
function creat(){
new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:++z});
i++;left +=10;
}
</script>
</body>
</html>
sunxing007 2009-06-05
- 打赏
- 举报
代码不会太长了 发不上来吧？
sunxing007 2009-06-05
- 打赏
- 举报
根据楼主说的要求，我修改了一下我以前写的一个drag, 应该完全符合你的要求。
http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx
http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx
<html>
<head>
<title>Drag</title>
<style type="text/css">
</style>
<script type="text/javascript">
var Drag = {
//当前被drag的对象
obj: null,
//当前所有可脱拽对象中最大的zIndex;
maxZIndex: 100,
//初始化
init: function(id){
var o = document.getElementById(id);
//当onmousedown开始拖拽
o.onmousedown = Drag.start;
o.style.zIndex = Drag.maxZIndex;
//alert(Drag.maxZIndex);
Drag.maxZIndex +=1;
},
start: function(e){
var o = Drag.obj = this;
//lastMouseX，lastMouseY记录上次鼠标的位置
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
//提高当前被推拽对象的zIndex使之处于最顶层
o.style.zIndex = Drag.maxZIndex;
Drag.maxZIndex +=1;
//status = o.maxZIndex;
//当onmousemove开始移动
document.onmousemove = Drag.move;
//当onmouseup终止拖拽
document.onmouseup = Drag.end;
},
move: function(e){
//alert(this.maxZIndex);
var o = Drag.obj;
//dx, dy表示鼠标移动的距离
var dx = Drag.getEvent(e).x - o.lastMouseX;
var dy = Drag.getEvent(e).y - o.lastMouseY;
//因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化
var left = parseInt(o.style.left) + dx ;
var top = parseInt(o.style.top) + dy;
o.style.left = left;
o.style.top = top;
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
},
end: function(e){
document.onmousemove = null;
document.onMouseup = null;
Drag.obj = null;
},
//辅助函数，处理IE和FF不同的event模型
getEvent: function(e){
if (typeof e == 'undefined'){
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if(typeof e.x == 'undefined'){
e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了
}
if(typeof e.y == 'undefined'){
e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了
}
return e;
}
};
</script>
</head>
<body>
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div>
</body>
<script type="text/javascript">
//测试代码开始，使三个div具有drag and drop的能力。
Drag.init('r');
Drag.init('g');
Drag.init('b');
</script>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/sunxing007
sunxing007 2009-06-05
- 打赏
- 举报
我也是最近开始对js比较着迷，觉得js是最好玩， 最灵活，最方便编写的程序。
你说的两本书我都看过一遍，还看了月影的javascript王者归来，
但是觉得这本书不值得，看过权威指南后它就显得没有参考价值了，
手头正在看得是javascript设计模式。但是因为java版的设计模式都没有学好， 所以进度比较慢。
在我同学那儿看到JavaScript DOM高级程序设计，觉得不错。
还有早期看过的Pro Javascript Techniques,中文名不计的了，是写jQuery那个人John Resig写的，
但是可能使我水平有限， 只觉得前半本有参考价值。
不过大多数都有pdf,你可以下下来先瞅瞅。
你说的两本书我都看过一遍，还看了月影的javascript王者归来，
但是觉得这本书不值得，看过权威指南后它就显得没有参考价值了，
手头正在看得是javascript设计模式。但是因为java版的设计模式都没有学好， 所以进度比较慢。
在我同学那儿看到JavaScript DOM高级程序设计，觉得不错。
还有早期看过的Pro Javascript Techniques,中文名不计的了，是写jQuery那个人John Resig写的，
但是可能使我水平有限， 只觉得前半本有参考价值。
不过大多数都有pdf,你可以下下来先瞅瞅。
wtcsy 2009-06-05
- 打赏
- 举报
写的不好
《javascript设计模式》没看过
最近想去买点js的书 有没有点推荐的
我手上有2本 js高级程序设计 权威指南4 这就不用推荐了
《javascript设计模式》没看过
最近想去买点js的书 有没有点推荐的
我手上有2本 js高级程序设计 权威指南4 这就不用推荐了
sunxing007 2009-06-05
- 打赏
- 举报
[Quote=引用 9 楼 wtcsy 的回复:]
上面的代码不对
看这个
设置zindex的地方在注释后面打========号！
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
......
[/Quote]
代码拜读了。
你写得很好， 如果力求完美的话， z应该作为Dialog的静态属性。不知道你有没有看过《javascript设计模式》没， 第35页讲解了js怎么实现静态属性和方法。
上面的代码不对
看这个
设置zindex的地方在注释后面打========号！
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
......
[/Quote]
代码拜读了。
你写得很好， 如果力求完美的话， z应该作为Dialog的静态属性。不知道你有没有看过《javascript设计模式》没， 第35页讲解了js怎么实现静态属性和方法。
wtcsy 2009-06-04
- 打赏
- 举报
不对吧 drag后 他还是必须显示在最前面 还原那就不显示在最前面了
monexus 2009-06-04
- 打赏
- 举报
[Quote=引用 3 楼 luxu001207 的回复:]
<div onclick="this.zIndex +=1;">test </div>
[/Quote]
支持
LZ在drag后可以还原zIndex
<div onclick="this.zIndex +=1;">test </div>
[/Quote]
支持
LZ在drag后可以还原zIndex
Atai-Lu 2009-06-04
- 打赏
- 举报
[Quote=引用 1 楼 luxu001207 的回复:]
<div onclick="this.zIndex +=1;">test </div>
[/Quote]
我写错了，汗
<div onclick="this.zIndex +=1;">test </div>
[/Quote]
我写错了，汗
wtcsy 2009-06-04
- 打赏
- 举报
不对吧
我狂点一个div
他的zindex是100
另一个是30 30+30=60
它不是显示在最外面！~
我狂点一个div
他的zindex是100
另一个是30 30+30=60
它不是显示在最外面！~
Atai-Lu 2009-06-04
- 打赏
- 举报
<div onclick="this.zIndex +=this.zIndex;">test</div>
