基于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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery操作css样式
May 15 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery位置选择器用法实例分析
Jun 28 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
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
分享3个php获取日历的函数
2015/09/25 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python中reload重载实例用法
2020/12/15 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014年车间工作总结
2014/11/21 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python