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实现的简单在线计算器功能
May 11 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现视频展示效果
May 30 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现推拉门效果
Oct 19 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JS中数组重排序方法
2016/11/11 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
python Spyder界面无法打开的解决方法
2018/04/27 Python
pycham查看程序执行的时间方法
2018/11/29 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
外语专业毕业生自荐信
2014/04/14 职场文书
赢在执行观后感
2015/06/16 职场文书
学习经验交流会策划书
2015/11/02 职场文书
高中团支书竞选稿
2015/11/21 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python
linux下安装redis图文详细步骤
2021/12/04 Redis