jQuery 拖拽

心已赠人 2022-04-14 20:12 337阅读 0赞

<!DOCTYPE html>
    <html><head>
        <meta charset="utf-8" />
        <title>jQuery拖拽</title>
        <script src="./CRM-微信_files/jquery.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            #pic {
                width: 80px;
                height: 80px;
                position: absolute;
                left: 0;
                right: 0;
    
            }
    
            a {
                background:red;
            }
        </style>
    </head>
    <body>
        <div id="pic">
            <img src="img/1.jpg" width="80px" />
        </div>
        <script type="text/javascript">
            var drag = function (obj) {
    
                obj.on("mousedown", start);
    
                function start(event) {
                    if (event.button == 0) {//判断是否点击鼠标左键
                        gapX = event.clientX - obj.offset().left;
                        gapY = event.clientY - obj.offset().top;
                        //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
                        $(document).on("mousemove", move);
                        //此处的$(document)可以改为obj
                        $(document).on("mouseup", stop);
                    }
                    return false;//阻止默认事件或冒泡
                }
                function move(event) {
                    obj.css({
                        "left": (event.clientX - gapX) + "px",
                        "top": (event.clientY - gapY) + "px"
                    });
                    return false;//阻止默认事件或冒泡  （这里很有必要）
                }
                function stop() {
                    //解绑定，这一步很必要，前面有解释
                    $(document).off("mousemove", move);
                    $(document).off("mouseup", stop);
                }
            }
            obj = $("#pic");
            drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数
        </script>
    </body></html>