简单的JS鼠标拖曳效果，展开折叠的层

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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/javascript">
  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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

简单的JS鼠标拖曳效果，展开折叠的层

分类

表格图层

描述

简单JS代码实现的鼠标拖曳图层效果，比较精简，大家参考一下。鼠标点击层标题栏可实现层内容的展开与折叠，按住标题栏可实现层的拖动。