[封装插件]鼠标拖动元素跟随功能

最新推荐文章于 2022-08-27 21:11:00 发布

Byte_Dance

最新推荐文章于 2022-08-27 21:11:00 发布

阅读量502

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动元素跟随功能</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        #divid{
            width:100px;
            height: 100px;
            background:red;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>

<!--<p>鼠标位于坐标： <span></span>.</p>    });-->
<div id="divid">

</div>
<script type="text/javascript">
/**
    screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
    clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
    pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
 */
//完整的鼠标拖动案例封装方法
    function drag(obj) {
        obj.bind("mousedown",start);
        function start(event){
            //deltaX 和deltaY就表示鼠标在元素的那个位置
            deltaX = event.clientX-obj.offset().left;
            deltaY = event.clientY-obj.offset().top;

            $(document).bind("mousemove",move);
            $(document).bind("mouseup",stop);
            return false;   //防止出现拖动速度过快发生的滑出屏幕现象

        }

        function move(event) {
            obj.css({
                    //然后元素的坐标就等于鼠标的位置减去鼠标和元素的偏移量
                "left": (event.clientX - deltaX) + "px",
                "top": (event.clientY - deltaY) + "px",
            })
            return false;   //防止出现拖动速度过快发生的滑出屏幕现象
        }

        function stop() {
            $(document).unbind("mousemove", move);  //把所有的事件解绑
            $(document).unbind("mouseup", stop);    //把所有的事件解绑
        }
    }
    obj = $("#divid");
    drag(obj);
//使用这种方法完成目的会有bug , 当元素移动到外边的时候,鼠标会跟随,鼠标释放事件就消失了
/*    $("#divid").mousedown(function(){
        $(document).bind("mousemove",function(e){
            x = e.clientX;
            y = e.clientY;
            $("#divid").css({"top":y+"px","left":x+"px"});
        });
        $(this).mouseup(function(){
            $(document).unbind("mousemove");
        });
    })*/

/*
使用JS的方式去实现
    val = document.getElementById("divid");
    val.onmousedown = function(){
        document.onmousemove = function(event){
            x = event.clientX;
            y = event.clientY;
            val.style.top = y+"px";
            val.style.left = x+"px";

        }
    }
*/

</script>

</body>
</html>

Byte_Dance

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[封装插件]鼠标拖动元素跟随功能

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标拖动元素跟随功能&lt;/title&gt; &lt;!--百度在线压缩地址--&gt; &lt;script sr
复制链接

扫一扫