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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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/js获取客户端mac地址的实现代码
2013/07/08 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php查询及多条件查询
2017/02/26 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
视觉直观感受若干常用排序算法
2017/04/13 Python
python3实现随机数
2018/06/25 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python requests模块实例用法
2019/02/11 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python实现趣味图片字符化
2019/04/30 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
什么是封装
2013/03/26 面试题
实习护理工作自我评价
2013/09/25 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
八年级语文教学反思
2014/02/11 职场文书
出纳员的岗位职责
2014/02/22 职场文书
水利水电专业自荐信
2014/07/08 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
新郎新娘答谢词
2015/01/04 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书