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 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
谈一谈javascript闭包
Jan 28 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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操作XML作为数据库的类
2010/12/19 PHP
php 中英文语言转换类代码
2011/08/11 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP中的替代语法介绍
2015/01/09 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
理解javascript对象继承
2016/04/17 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
微信小程序实现锚点功能
2019/11/20 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python使用matplotlib画饼状图
2018/09/25 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
老兵退伍标语
2014/10/07 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
遗愿清单观后感
2015/06/09 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery