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实现前端分页功能
Mar 23 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
基于文本的访客签到簿
2006/10/09 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
layui导航栏实现代码
2017/05/19 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
大学专科求职信
2014/07/02 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2014年图书室工作总结
2014/12/09 职场文书
优秀教师事迹材料
2014/12/15 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
mysql全面解析json/数组
2022/07/07 MySQL