基于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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php preg_replace替换实例讲解
2013/11/04 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
关于递归的一道.NET面试题
2013/05/12 面试题
水电工岗位职责
2014/02/12 职场文书
七匹狼男装广告词
2014/03/21 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
建设工地安全标语
2014/06/07 职场文书
股权转让协议范本
2014/12/07 职场文书
通知的写法
2015/04/23 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
webpack的移动端适配方案小结
2021/07/25 Javascript
一文搞懂Python Sklearn库使用
2021/08/23 Python