javascript drag类操作多个对象时出错

mrtuzi 2009-12-19 03:43:52
自己写的一个drag类,如果是一个new drag()的话,没问题.
但是如果写两个new drag..只有后面的起作用.
朋友们知道为什么吗


<!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>drag类</title>
</head>

<body>
<style>
#pop{width:400px;background-color:#CCCCCC; border:1px solid #000;}
#popt{border:1px solid #000; border-left:none; border-right:none; cursor:move}
#btnclost{cursor:hand;float:right}
#popm{height:300px;}
#ddd{float:left}
</style>
<div id="ddd">
222222222222222222222222
</div>

<div id="pop">
<span id="btnclost">X</span><div id="popt">标题标题标题标题标题标题</div>
<div id="popm">
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<script>
function $(o){return document.getElementById(o)}

$('btnclost').onclick=function(){$('pop').style.display='none';}
var drag=function(obj,handle){
with(this){
d=0;cache={};
no=$(obj).cloneNode(true);
if($(obj)){
o=$(obj);d=1;
hd=(!$(handle)?o:$(handle));
hd.onmousedown=function(e){
if(!e){var e=window.event}
x=$(obj).offsetLeft;
y=$(obj).offsetTop;
ow=e.clientX-x;
oh=e.clientY-y;
with(no.style){
position='absolute';
left=x+'px';
top=y+5+'px';
filter='Alpha(Opacity="30")';
}
document.body.appendChild(no);
document.onselectstart=function(){return false}
}
no.onmouseup=function(e){
if(!e){var e=window.event}
try{
document.body.removeChild(no);
with($(obj).style){
position='absolute';
left=(e.clientX-ow)+'px';
top=(e.clientY-oh)+'px';
}
}catch(err){}
d=0;document.onselectstart=function(){return true};
drag=null;
}
no.onmousemove=function(e){
if(!e){var e=window.event}
try{
with(no.style){
left=e.clientX-ow+'px';
top=e.clientY-oh+'px';
}
}catch(err){}
}
}
}}
new drag('ddd');//这个没起作用
new drag('pop');//只有这个起作用
</script>
</body>
</html>
...全文
115 6 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
mrtuzi 2009-12-19
  • 打赏
  • 举报
回复
谢谢各位,特别四楼的sundotLei朋友,
看来我还得继续学习哈.with和this的用法还不怎么行.
xiaofan_sap 2009-12-19
  • 打赏
  • 举报
回复
http://blog.csdn.net/xiaofan_sap/archive/2009/10/15/4677394.aspx
看看这个吧
sundotLei 2009-12-19
  • 打赏
  • 举报
回复
#1正解

Try...


<!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>drag类</title>
</head>

<body>
<style>
#pop{width:400px;background-color:#CCCCCC; border:1px solid #000;}
#popt{border:1px solid #000; border-left:none; border-right:none; cursor:move}
#btnclost{cursor:hand;float:right}
#popm{height:300px;}
#ddd{float:left}
</style>
<div id="ddd" style="width:200px;height:200px;border:1px solid;background-color:#CCCCCC;cursor:move">
222222222222222222222222
</div>

<div id="pop" >
<span id="btnclost">X</span><div id="popt">标题标题标题标题标题标题</div>
<div id="popm">
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<script>
function $(o){return document.getElementById(o)}

//$('btnclost').onclick=function(){$('pop').style.display='none';}
var drag=function(obj,handle){

this.d=0;this.cache={};
this.no=$(obj).cloneNode(true);
if($(obj)){
this.o=$(obj);this.d=1;
this.hd=(!$(handle)?this.o:$(handle));
this.hd.onmousedown=(function(e,no){
return function(e){
if(!e){var e=window.event}
x=$(obj).offsetLeft;
y=$(obj).offsetTop;
ow=e.clientX-x;
oh=e.clientY-y;
with(no.style){
position='absolute';
left=x+'px';
top=y+5+'px';
filter='Alpha(Opacity="30")';
}
document.body.appendChild(no);
document.onselectstart=function(){return false}
}
}
)(window.event,this.no)
this.no.onmouseup=function(e){

if(!e){var e=window.event}
try{
document.body.removeChild(this);
with($(obj).style){
position='absolute';
left=(e.clientX-ow)+'px';
top=(e.clientY-oh)+'px';
}
}catch(err){}
d=0;document.onselectstart=function(){return true};
drag=null;
}

this.no.onmousemove=function(e){
if(!e){var e=window.event}
try{
with(this.style){
left=e.clientX-ow+'px';
top=e.clientY-oh+'px';
}
}catch(err){}
}

}}
new drag('ddd');//这个没起作用
new drag('pop','popt');//只有这个起作用
</script>
</body>
</html>


licip 2009-12-19
  • 打赏
  • 举报
回复
this.a=0;
this.b=0;
这样写才是对象里的属性.
如果写a,b这是定义全局变量了.不是对象里的属性了.
mrtuzi 2009-12-19
  • 打赏
  • 举报
回复
嗯.with写法有问题,返回undefine
但是如果我这么写的话,好像正常了.

var obj = function(){
this.a=0;
this.b=0;
with(this){
a = 1;
b = 2;
}
}

var n=new obj();
alert(n.b);

结果输出2
xiaoya317 2009-12-19
  • 打赏
  • 举报
回复
var obj = {};

with (obj) {
a = 1;
b = 2;
}

alert(obj.a);


你认为with中赋值了obj.a,会输出1?自己测试一下吧。
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-19 03:43
社区公告
暂无公告