基于jQuery拖拽事件的封装


Posted in jQuery onNovember 29, 2020

本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="jquery-3.4.1.min.js"></script>
  <script src="Drag.js"></script>
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      height: 200px;
      width: 200px;
      background-color: red;
      position: absolute;
      /* 让文字无法被选中 */
      user-select:none;
    }
  </style>
</head>
<body>
  <div class="box"></div>box</div>
  <script>
    $('.box').Drag();//直接调用Drag()方法就可以了
  </script>
</body>
</html>

封装的jQuery拖拽事件:

;(function($) {
  $.fn.extend({
    Drag(){
      //把this存起来,始终指向操作的元素
      _this = this;
      this.on('mousedown',function (e) {
        //盒子距离document的距离
        var positionDiv = $(this).offset();
        //鼠标点击box距离box左边的距离
        var distenceX = e.pageX - positionDiv.left;
        //鼠标点击box距离box上边的距离
        var distenceY = e.pageY - positionDiv.top;
        $(document).mousemove(function(e) {
          //盒子的x轴
          var x = e.pageX - distenceX;
          //盒子的y轴
          var y = e.pageY - distenceY;
          //如果盒子的x轴小于了0就让他等于0(盒子的左边界值)
          if (x < 0) {
            x = 0;
          } 
          //盒子右边界值
          if(x > $(document).width() - _this.outerWidth()){
            x = $(document).width() - _this.outerWidth();
          }
          //盒子的上边界值
          if (y < 0) {
            y = 0;
          }
          //盒子的下边界值
          if(y > $(document).height() - _this.outerHeight()){
            y = $(document).height() - _this.outerHeight();
          }
          //给盒子的上下边距赋值
          $(_this).css({
            'left': x,
            'top': y
          });
        });
        //在页面中当鼠标抬起的时候,就关闭盒子移动事件
        $(document).mouseup(function() {
          $(document).off('mousemove');
        });
      })
      //把this返回回去继续使用jqurey的链式调用
      return this
    }
  })
})(jQuery)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现动态操作table行
Nov 23 #jQuery
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
You might like
PHPUnit安装及使用示例
2014/10/29 PHP
PHP线程的内存回收问题
2016/07/08 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
怎样声明子类
2013/07/02 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
求职毕业生自荐书
2014/02/08 职场文书
施工协议书范本
2014/04/22 职场文书
诚信承诺书
2015/01/19 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015初中团委工作总结
2015/07/28 职场文书
任命书格式范文
2015/09/22 职场文书