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>

...全文

124 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

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错误及其解决方法 JavaScript可能是调试的噩梦：一开始它会产生一些错误，很难理解，而且给出的行号也不总是有用。有一个清单可以帮助您了解它们的含义以及如何修复它们，这对您有用吗？干得好！以下列出了JavaScript中的奇怪错误。不同的浏览器可以针对同一错误为您提供不同的消息，因此有几个不同的示例适用。如何读取错误？在列表之前，让我们快速查...

JavaScript 总结 JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备，JavaScript是一种轻量级的编程语言。一、变量有三个关键字可以用于声明变量：var,let,const。后面两个是ES6新加的。如果没有使用任何关键字，变量是全局变量。 var 声明的变量会被提升到当前作用域的最前面，它的作用域范围也就是当前作用域，即使它是在语句块中声明。 let、const声明的变量会绑定当前语句块（暂时

但是在定义的对象时对象属性值可以改变var定义的变量，变量提升，没有块的概念，可以跨块访问。let定义的变量，只能在块作用域里访问，不能声明同名变量。const用来定义常量，使用时必须初始化(即必须赋值)，不能声明同名变量，只能在块作用域里访问，而且不能修改，但是在定义的对象时对象属性值可以改变。他们都不能跨函数访问我的JavaScript笔记—— 一、var、let、const的区别?_admin_zlj的博客-CSDN博客内存管理引擎层面。

因为这两篇太安逸了,东西很多,很实用,所以转到我格子里!总的来说,如果你要找js 的东西,而不看这两篇的话,肯定要多花好多时间!!哈哈!!如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!! 事件源对象 event.srcElement.tagName event.srcE...

JavaScript

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章