JS实现可展开折叠层的鼠标拖曳效果


Posted in Javascript onOctober 09, 2015

本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果。分享给大家供大家参考。具体如下:

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

运行效果截图如下:

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/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>
 <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" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
 <p>test</p>
 </div>
  <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
 <p>test</p>
 </div>
  <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
 <p>test</p>
 </div>
 </body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
PHP PDO操作总结
Nov 17 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 #Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 #Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python玩转Excel的读写改实例
2019/02/22 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
读书伴我成长演讲稿
2014/05/07 职场文书
2014年工程师工作总结
2014/11/25 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
长江七号观后感
2015/06/11 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书