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 打开页面window.location和window.open的区别
Mar 17 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
看了就知道什么是JSON
2007/12/09 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python ini文件常用操作方法解析
2020/04/26 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
财务助理岗位职责
2013/11/10 职场文书
副董事长岗位职责
2014/04/02 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
大学生毕业评语
2014/12/31 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
反邪教教育心得体会
2016/01/15 职场文书