基于jQuery拖拽事件的封装

本文实例为大家分享了基于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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • 基于jQuery拖拽事件的封装

    本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <

  • WPF中鼠标/键盘/拖拽事件以及用行为封装事件详解

    目录 鼠标事件 键盘输入事件 拖拽事件 用行为封装事件 用事件来实现 用行为来封装 本文主要介绍了WPF中常用的鼠标事件.键盘事件以及注意事项,同时使用一个案例讲解了拓展事件.除此之外,本文还讲述如何用行为(Behavior)来封装事件. Windows中的事件通过消息机制来完成,也就是Windows系统来捕获用户输入(如鼠标点击.键盘输入),然后Windows发送一个消息给应用程序,应用程序进行具体的处理.在Winform中,窗体中每个控件都是有独立的句柄,也就是每个控件都可以收到Window

  • 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; •ng-drop:是否允许放入拖拽元素 •ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 •ng-drag:元素是否允许拖拽 •ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 •

  • jquery拖拽自动排序插件使用方法详解

    本文为大家分享了jquery拖拽自动排序插件,供大家参考,具体内容如下 该插件并不是原生js写的,是基于jquery的,想看原生的话,请绕道而行. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javas

  • jQuery拖拽通过八个点改变div大小

    jQuery拖拽通过八个点改变div大小 js: (function($) { /** * 默认参数 */ var defaultOpts = { stage: document, //舞台 item: 'resize-item', //可缩放的类名 }; /** * 定义类 */ var ZResize = function(options) { this.options = $.extend({}, defaultOpts, options); this.init(); } ZResize.

  • javascript实现文件拖拽事件

    本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下 1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style type="text/css"> #div1 { width: 350px; height: 70px; pa

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • jquery拖拽排序简单实现方法(效果增强版)

    jquery拖拽排序简单实现方法(效果增强版)

    本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCapture来解决. sideDragBar.on('mousedown.sideMenu', function(e){ this.setCapture && this.setCapture();// ie下可以使用setCapture来解决object拖拽问题 startDragging(e);

随机推荐