完美实现鼠标拖拽事件，解决各种小bug，基于jquery

最新推荐文章于 2024-05-13 15:06:53 发布

u013344815

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量1.9w

点赞数 14

分类专栏： javascript 文章标签： JavaScript js 鼠标拖拽 jquery HTML

本文链接：https://blog.csdn.net/u013344815/article/details/72598890

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

本次我才用jQuery实现一个尽可能高效的拖拽效果，代码中有细节上的解释，就不多说了，代码很简洁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></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">
            <img src="img/bagua.gif" width="80px"/>
        </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>

效果示意

u013344815

关注

14
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
完美实现鼠标拖拽事件，解决各种小bug，基于jquery

鼠标拖拽事件是web中使用频率极高的事件，之前写过的代码包括网上的代码，总存在各种各样的问题，包括拖拽体验差，松开鼠标后拖拽效果仍存在以及代码冗余过大等本次我才用jQuery实现一个尽可能高效的拖拽效果，代码中有细节上的解释，就不多说了，代码很简洁 *{
复制链接

扫一扫