基于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手风琴的简单制作
May 12 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery css实现流程进度条
Mar 26 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python实现合并两个数组的方法
2015/05/16 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
简单了解python的内存管理机制
2019/07/08 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python如何爬取动态网站
2020/09/09 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
旷课检讨书2000字
2014/01/14 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
详解Vue router路由
2021/11/20 Vue.js