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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
javascript中的继承实例代码
Apr 27 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
解决laravel session失效的问题
2019/10/14 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2014年财政局工作总结
2014/12/09 职场文书
小学教师年度个人总结
2015/02/05 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
实习介绍信范文
2015/05/05 职场文书
2016国庆促销广告语
2016/01/28 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL