asp.net2.0中实现鼠标移动层的效果

本人用asp.net2.0+vb2005写网页程序,其中用到了微软的ajax,由于需要修改和录入数据,便把这些功能放到了一个层中来实现,但是层增加到页面后总是呆板地呆在一个地方,让人用时会有些不便,经过在网上查找,发现了一个可以用鼠标拖动层的代码,我经过了一些改动,现发给大家.

1. 需要编写一个index.js文件,代码改后如下:

function createobj() {
 if (window.ActiveXObject) {
         return(new ActiveXObject("Microsoft.XMLHTTP"));
     }
     else if (window.XMLHttpRequest) {
         return(new XMLHttpRequest());
     }
}

function personalInfo(div_id) {
  var oBao=createobj();
  var cont=document.getElementById(div_id);
  cont.style.display='block';
  cont.style.cursor='pointer';
 }

 

function Drag(id)
{
var self=this;
this.obj=(typeof(id)=="string")?document.getElementById(id):id;
this.obj.οnmοusedοwn=function(e)
{
e=e||window.event;
var obj=self.obj;//指向自己
if(e.layerX){obj.position={x:e.layerX,y:e.layerY};}
else{obj.position={x:e.offsetX,y:e.offsetY};}
document.οnmοusemοve=self.start;
document.οnmοuseup=self.end;

}
this.start=function(e)
{
e=e||event;
document.onselectstart = function(){ return false; };
window.getSelection && window.getSelection().removeAllRanges();
var obj=self.obj;
obj.style.left=e.clientX-obj.position.x+"px";
obj.style.top=e.clientY-obj.position.y+"px";
}
this.end=function(e)
{
e=e||event;
document.onmousemove = document.onmouseup = document.onselectstart = null;    
}
}

上面红色字体的那一部分在我的页面中没有使用,我想大家也可能用不到那一部分代码,可以不写.

 

2. 然后需要新建一个网页,我建的是main.aspx,用到的代码有以下两部分.

   (1)在head与head之间增加对脚本文件的引用,如下:

       <script language="javascript" src="index.js" type="text/javascript"></script>

   (2)在</html>外面说明需要用鼠标移动的层,代码如下:

      <script type="text/javascript">
          var s1=new Drag("D_mod");
       </script>

      其中红色字体部分表示的是你所要移动层的ID号,如果你需要实现移动多个层,那么就把那部分代码复制上多次就可以了,但S1这个变量不可改变,我也不知为什么,反正我改了后就无法移动了.

 

最后就讲一下这个方法缺点吧.

1. 如果页面上下超过一页的话,移动起来会出现一些小问题,能移但位置会变动.

2.如果你的层在代码中隐藏的话,那么再显示后是无法移动的.

3.如果你的层在ajax的UpdatePanel控件中,那么此层将不会移动.

 

如果哪位高手有更好的方法,请留言..