jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】


Posted in jQuery onDecember 29, 2018

本文实例讲述了jQuery实现的鼠标拖动浮层功能。分享给大家供大家参考,具体如下:

拖动浮层(div等任何标签)

之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂。看了几个方法后发现基本上都是使用mousedown、mousemove和mouseup这三个函数来写的,然后就自己写了个移动div的方法。

先用mousedown来判断是否要开启移动,然后通过mousemove来获得移动的距离,实现移动;最后通过mouseup事件来判断移动结束了。

完整代码实例:

<html>
<head>
  <meta charset="utf-8"></meta>
  <title>Drag Div</title>
  <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
  <div id="moveDiv" style="width:300px;height:300px;background-color:red;position:absolute;">
    <div id="moveBar" style="background-color:green;height:30px;cursor: move;"></div>
  </div>
  <script type="text/javascript">
    var dragJob=false;
    $(document).on("mousedown", '#moveBar', function (e) {
      dragJob = true;
    });
    document.onmousemove = function (e) {
    if (dragJob) {
      var e = e || window.event;
      var height = $(document.body).height();
      var width = $(window).width();
      var widthJob = $("#moveDiv").width();
      var heightJob = $("#moveDiv").height();
      var left = e.clientX - widthJob / 2;
      var top = e.clientY - 18 + $(document).scrollTop();
      if (top >= 0 && top < height - heightJob) {
        $("#moveDiv").css("top", top);
      }
      if (left >= 0 && left < width - widthJob) {
        $("#moveDiv").css("left", left);
      }
      return false;
    }
  };
  $(document).mouseup(function (e) {
    dragJob = false;
  });
  </script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可获得如下运行效果:

jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】

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

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
You might like
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP中overload与override的区别
2017/02/13 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
JS功能代码集锦
2016/05/04 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python的标准模块包json详解
2017/03/13 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python实现疫情地图可视化
2021/02/05 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
军训的自我鉴定
2013/12/10 职场文书
安全生产责任书范本
2014/04/15 职场文书
连带责任保证书
2014/04/29 职场文书
在校实习生求职信
2014/06/18 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2014年医德医风工作总结
2014/11/13 职场文书