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 02 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jquery实现图片放大镜效果
Dec 23 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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python Socket传输文件示例
2017/01/16 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python colormap库的安装和使用详情
2020/10/06 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
数据库面试要点基本概念
2013/10/31 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
后勤主管岗位职责
2014/03/01 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
南极大冒险观后感
2015/06/05 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
详细聊聊vue中组件的props属性
2021/11/02 Vue.js