Jquery实现用鼠标拖动代替滚动条拖动

效果图

这里偷懒没有用屏幕录制gif,大家可以自行测试

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    * {margin: 0;padding: 0;}
    ul,li {list-style: none;}
    img,a:hover img {border: none;}
    a {text-decoration: none;color: #000;cursor: pointer;}
    img {
      /* 图片被选中的蓝底，设置未none */
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }

    #dragWrap {
      position: relative;
      overflow: hidden;
    }

    #dragBody {
      position: absolute;
      zoom: 1;
    }

    /* 设置盒子宽高 */
    #dragWrap {
      margin: 20px auto;
      width: 1000px;
      height: 200px;
    }

    #dragBody {
      display: flex;
    }
    /* 设置图片大小 */
    #dragBody img {
      width: 300px;
      height: 100px;
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <div id="dragWrap">
    <div id="dragBody">
      <img src="img/demo/m1.jpg" alt="" />
      <img src="img/demo/m2.jpg" alt="" />
      <img src="img/demo/m3.jpg" alt="" />
      <img src="img/demo/s1.jpg" alt="">
      <img src="img/demo/s2.jpg" alt="">
      <img src="img/demo/s3.jpg" alt="">
    </div>
  </div>

  <script type="text/javascript" src="Common/js/jquery-3.4.0.min.js"></script>
  <script language="javascript">

    //这里只需要传入盒子最外层id即可
    mouseMove('dragWrap')


    function mouseMove(dragWrapID) {
      var $dragWrapID = "#"+dragWrapID;
      var $dragWrap = $($dragWrapID);
      //鼠标移动操作
      var drag = function drag() {
        this.init.apply(this, arguments);
      };
      drag.prototype = {
        constructor: drag,
        _dom: {},
        _x: 0,
        _y: 0,
        _top: 0,
        _left: 0,
        move: false,
        down: false,
        init: function () {
          this.bindEvent();
        },
        bindEvent: function () {
          var t = this;
          $('body').on('mousedown', $dragWrapID, function (e) {
            e && e.preventDefault();
            if (!t.move) {
              t.mouseDown(e);
            }
          });
          $('body').on('mouseup', $dragWrapID, function (e) {
            t.mouseUp(e);
          });

          $('body').on('mousemove', $dragWrapID, function (e) {
            if (t.down) {
              t.mouseMove(e);
            }
          });
          //解决bug，当鼠标移出当前元素时，回来还可以继续拖动
          $('body').on('mouseleave', '#dragWrap', function (e) {
            t.mouseUp(e);
          });
        },
        mouseMove: function (e) {
          e && e.preventDefault();
          this.move = true;
          var x = this._x - e.clientX,
            y = this._y - e.clientY;
            $dragWrap.scrollLeft(this._left + x);
            $dragWrap.scrollTop(this._top + y);
        },
        mouseUp: function (e) {
          e && e.preventDefault();
          this.move = false;
          this.down = false;
          $dragWrap.css('cursor', '');
        },
        mouseDown: function (e) {
          this.move = false;
          this.down = true;
          this._x = e.clientX;
          this._y = e.clientY;
          this._top = $dragWrap.scrollTop();
          this._left = $dragWrap.scrollLeft();
          $dragWrap.css('cursor', 'move');
        }
      };
      var drag = new drag();
    };

  </script>
</body>

</html>
Jquery实现用鼠标拖动代替滚动条拖动

效果图

猜你喜欢
