鼠标拖拽事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./jquery-1.12.4.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #pic {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 0;
        right: 0;
      }
      a {
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div id="pic">拖动我试试</div>
    <script type="text/javascript">
      var drag = function(obj) {
        obj.bind(\'mousedown\', start)

        function start(event) {
          if (event.button == 0) {
            //判断是否点击鼠标左键
            /*
             * clientX和clientY代表鼠标当前的横纵坐标
             * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
             * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在
             * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值，
             * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的
             */
            gapX = event.clientX - obj.offset().left
            gapY = event.clientY - obj.offset().top
            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
            $(document).bind(\'mousemove\', move)
            //此处的$(document)可以改为obj
            $(document).bind(\'mouseup\', stop)
          }
          return false //阻止默认事件或冒泡
        }
        function move(event) {
          obj.css({
            left: event.clientX - gapX + \'px\',
            top: event.clientY - gapY + \'px\'
          })
          return false //阻止默认事件或冒泡
        }
        function stop() {
          //解绑定，这一步很必要，前面有解释
          $(document).unbind(\'mousemove\', move)
          $(document).unbind(\'mouseup\', stop)
        }
      }
      obj = $(\'#pic\')
      drag(obj) //传入的必须是jQuery对象，否则不能调用jQuery的自定义函数
    </script>
  </body>
</html>
发表于 2019-07-10 21:53 我是一枚前端小菜鸟阅读(1357) 评论(0) 编辑收藏举报