JS代码实现的鼠标拖曳图层效果_网页布局

JS代码实现的鼠标拖曳图层效果: 发布时间：2019-08-14编辑：脚本学堂

JS代码实现的鼠标拖曳图层效果，鼠标点击层标题栏可实现层内容的展开与折叠，按住标题栏可实现层的拖动。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>鼠标拖曳</title>
 </head>
 <body>
  <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
  function drag(elementToDrag,event){
    var startX=event.clientX,startY=event.clientY;
    var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
    var deltaX=startX-origX,deltaY=startY-origY;
    if(document.addEventListener){
       document.addEventListener("mousemove",moveHandler,true); 
    document.addEventListener("mouseup",upHandler,true);
 }
 else{
    elementToDrag.setCapture();
    elementToDrag.attachEvent("onmousemove",moveHandler);
    elementToDrag.attachEvent("onmouseup",upHandler);
    elementToDrag.attachEvent("onlosecapture",upHandler);
 }

if(event.stopPropagation) event.stopPropagation();
 else event.cancelBubble=true;
 if(event.preventDefault) event.preventDefault();
 else event.returnValue=false;
 function moveHandler(e){
   if(!e) e=window.event;
   elementToDrag.style.left=(e.clientX-deltaX)+"px";
   elementToDrag.style.top=(e.clientY-deltaY)+"px";
   elementToDrag.style.zIndex="10";
   elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
   if(e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;
 }

function upHandler(e){
   if(!e) e=window.event;
      elementToDrag.style.zIndex="1";
   if(document.removeEventListener){
      document.removeEventListener("mouseup",upHandler,true);
   document.removeEventListener("mousemove",moveHandler,true);
   }
   else{
      elementToDrag.detachEvent("onlosecapture",upHandler);
   elementToDrag.detachEvent("onmouseup",upHandler);
   elementToDrag.detachEvent("onmousemove",moveHandler);
   elementToDrag.releaseCapture();
   }

if(e.stopPropagation) e.stopPropagation();
   else e.cancelBubble=true;
 }
  }
  </script>

<div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
    <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmou<a href=http://www.jb200.com/article/1141.html target=_blank class=infotextkey>sed</a>own="drag(this.parentNode,event)">Drag Me1</div>
 <p>test</p>
  </div>

提示：可修改代码后再运行!

上一篇：jQuery控制DIV由大到小，由远及近的变化
下一篇：漂亮的JS窗口拖拽（改变大小/最小化/最大化/还原/关闭)

与 JS代码实现的鼠标拖曳图层效果有关的文章

本文标题：JS代码实现的鼠标拖曳图层效果
本页链接：http://www.jb200.com/tx/31.html

浏览排行

栏目分类

热点文章

JS代码实现的鼠标拖曳图层效果