实现鼠标拖拽事件，移动到窗口边自动吸附 

<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    #pic{
        width: 80px;
        height: 80px;
        position: absolute;
        left: 0;
        right: 0;
        overflow: hidden;
        background-color: red;
        border-radius: 40px;
        line-height: 80px;
        text-align: center;
        font-size: 16px;
        color: white;
        cursor: pointer;
    }
    .ripple {
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .5);
        -webkit-transform: scale(0);
        transform: scale(0);
        position: absolute;
        opacity: 1;
    } .rippleEffect {
          -webkit-animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
          animation: rippleEffect 2s cubic-bezier(0.23, 1, 0.32, 1);
      } @keyframes rippleEffect {
            100% {
                transform: scale(2);
                opacity: 0;
            }
        } @-webkit-keyframes rippleEffect {
              100% {
                  -webkit-transform: scale(2);
                  opacity: 0;
              }
          }

</style>
</head>

<body>
<div id="pic">
  V
</div>

<script type="text/javascript">

  tab($("#pic"))

    function tab(myobj) {
        obj=$(myobj);
        drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数
        function drag(obj){

            obj.bind("mousedown",start);
            obj.on("click", function(e) {
                ripple(e, $(this));
            });
            
            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){
                var newX=event.clientX-gapX
                var newY=event.clientY-gapY

                //防止移出屏幕，附加吸附边框效果
                newX<40?newX=0:newX=newX;
                newY<40?newY=0:newY=newY;
                newX>$(window).width()-120?newX=$(window).width()-80:newX=newX;
                newY>$(window).height()-120?newY=$(window).height()-80:newY=newY;

                obj.css({
                    "left":(newX)+"px",
                    "top":(newY)+"px"
                });
                return false;//阻止默认事件或冒泡
            }
            function stop(){
                //解绑定，这一步很必要，前面有解释
                $(document).unbind("mousemove",move);
                $(document).unbind("mouseup",stop);

            }
            
            //点击出现波纹
            function ripple(event, $this) {
                event = event || window.event;
                var x = event.pageX || event.originalEvent.pageX;
                var y = event.pageY || event.originalEvent.pageY;
                var wx = $this.width();
                x = x - $this.offset().left - wx / 2;
                y = y - $this.offset().top - wx / 2;
                var span = '<div class="ripple"></div>';
                $this.prepend(span);
                $(".ripple").css({
                    width: wx,
                    height: wx,
                    top: y + "px",
                    left: x + "px"
                }).addClass("rippleEffect");
                $(document).one("webkitAnimationEnd animationend", ".ripple", function() {
                    $(".ripple").remove();
                });
            }
        }
    }



</script>
</body>

 

代码学习、参考、引用、优化自：

https://www.cnblogs.com/phpyangbo/p/7838632.html

https://www.cnblogs.com/libin-1/p/6103484.html

 注意要引用Jquery

 

posted @ 2020-04-23 11:25  心有此关  阅读(836)  评论(0)    收藏  举报