基于jQuery封装的拖拽事件

  1. 一、HTML代码:
  2. 二、封装的jQuery拖拽事件:

鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等

本次我才用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)

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:基于jQuery封装的拖拽事件

文章字数:547

本文作者:Spicy boy

发布时间:2019-01-29, 17:55:21

最后更新:2021-03-08, 17:26:19

原始链接:http://www.spicyboy.cn/2019/01/29/%E5%9F%BA%E4%BA%8EjQuery%E5%B0%81%E8%A3%85%E7%9A%84%E6%8B%96%E6%8B%BD%E4%BA%8B%E4%BB%B6/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏