教程集 > 脚本编程 > javascript > 正文 js层的拖动效果

js层的拖动效果

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供js层的拖动效果等资源，欢迎您收藏本站，我们将为您提供最新的js层的拖动效果资源

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <title>zhou's html</title>  </head>  <body>                                                  一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的  <div id="test" style='border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div>    <div id="test1" style='border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span><br/><input type="text" style="width:80px" maxlength="9"/></div>    <div id="test2" style='border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span><br/><input type="button" value="hit me"/></div>    <br/><br/><br/><br/><br/><br/><br/><br/><br/>  <script type="text/javascript" charset="utf-8">  var $=function(id){return document.getElementById(id)};  Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B  ){this.push(C[B]);}return this;}  function divDrag(){                  var A,B;          var zIndex=1;          this.dragStart=function(e){                  e=e||window.event;                  if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;                  var pos=this.$pos;                                  if(document.defaultView){                                          _top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");                                          _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}                                  else{                                          if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}                                  }                  pos.ox=(e.pageX||(e.clientX document.documentElement.scrollLeft))-parseInt(_left);                  pos.oy=(e.pageY||(e.clientY document.documentElement.scrollTop))-parseInt(_top);                                  if(!!A){                                           if(document.removeEventListener){                          document.removeEventListener("mousemove",A,false);                          document.removeEventListener("mouseup",B,false);                                          }else{                          document.detachEvent("onmousemove",A);                          document.detachEvent("onmouseup",B);                                                  document.detachEvent("ondragstart",G);                          }                                  }                                  A=this.dragMove.create(this);                  B=this.dragEnd.create(this);                  if(document.addEventListener){                                          document.addEventListener("mousemove",A,false);                      document.addEventListener("mouseup",B,false);                  }else{                                          document.attachEvent("onmousemove",A);                      document.attachEvent("onmouseup",B);                                                  G=function(){return false};                                                  document.attachEvent("ondragstart",G);                  }                  this.style.zIndex=(  zIndex);                  this.stop(e);          }          this.dragMove=function(e){                                  e=e||window.event;                                  var pos=this.$pos;                  this.style.top=(e.pageY||(e.clientY document.documentElement.scrollTop))-parseInt(pos.oy) 'px';                  this.style.left=(e.pageX||(e.clientX document.documentElement.scrollLeft))-parseInt(pos.ox) 'px';                                  this.stop(e);}          this.dragEnd=function(e){                  var pos=this.$pos;                                e=e||window.event;                                                                    if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;                  if(document.removeEventListener){                          document.removeEventListener("mousemove",A,false);                          document.removeEventListener("mouseup",B,false);                                  }else{                          document.detachEvent("onmousemove",A);                          document.detachEvent("onmouseup",B);                                                  document.detachEvent("ondragstart",G);                  }                                  A=null;                                  B=null;                  this.style.zIndex=(  zIndex);                  this.stop(e);          }          this.position=function (e){                   var t=e.offsetTop;                  var l=e.offsetLeft;                  while(e=e.offsetParent){                                   t =e.offsetTop;                                   l =e.offsetLeft;                   }                  return {x:l,y:t,ox:0,oy:0}          }          this.stop=function(e){                  if(e.stopPropagation){                          e.stopPropagation();                  }else{                          e.cancelBubble=true;}                                            if(e.preventDefault){                          e.preventDefault();}                  else{e.returnValue=false;}          }                  this.stop1=function(e){                          e=e||window.event;                  if(e.stopPropagation){                          e.stopPropagation();                  }else{                          e.cancelBubble=true;}            }          this.create=function(bind){                  var B=this;                  var A=bind;                  return function(e){                          return B.apply(A,[e]);                  }          }          this.dragStart.create=this.create;          this.dragMove.create=this.create;          this.dragEnd.create=this.create;                    this.initialize=function(){                  for(var A=0,B=arguments.length;A<B;A  ){                          C=arguments[A];                          C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);                          if(!C)continue;                          C.$pos=this.position(C);                          C.dragMove=this.dragMove;                          C.dragEnd=this.dragEnd;                          C.position=this.position;                          C.stop=this.stop;                                                  var $A=[];                                                  $A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);                                                  for(var D=0,E=$A.length;D<E;D  ){                                                          if(C.addEventListener){                                  $A[D].addEventListener("mousedown",this.stop1,false);                                                                  $A[D].addEventListener("mousemove",this.stop1,false);                                          }else{                                  $A[D].attachEvent("onmousedown",this.stop1);                                                                  $A[D].attachEvent("onmousemove",this.stop1);                                  }                                                  }                          if(C.addEventListener){                                  C.addEventListener("mousedown",this.dragStart.create(C),false);                          }else{                                  C.attachEvent("onmousedown",this.dragStart.create(C));                          }                  }            }          this.initialize.apply(this,arguments);            }  //生成拖动层很简单  new divDrag('test',$('test1'),$('test2'));  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js实现拖动层，兼容IEFireFox
Javascript 拖动效果兼容火狐
 jQuery实现可拖动的浮动层完整代码
 js简单拖动层效果
 基于jquery的鼠标拖动效果代码
 关于PHP jQuery-ui拖动浮动层排序并保存到数据库实例
 基于jquery的一行代码轻松实现拖动效果
 jquery div拖动效果示例代码
 JQuery UI的拖拽功能实现方法小结
 html5draggable属性是如何做到页面拖动效果的？方法总结在这里！

上一篇：复选框全选代码下一篇：模仿google搜索下拉框

[关闭]

js层的拖动效果

最近更新

浏览排行