jQuery 拖拽-蒲公英云

jQuery 拖拽

心已赠人 2022-04-14 20:12 408阅读 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>