jq的封装的一个仿淘宝聊天scroll--js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #div1{

            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1">

</div>
<script src="../js/jquery-1.7.2.min.js"></script>
<script>
    $.fn.extend({
        drag:function () {
            var disX=0;
            var disY=0;
            //封装一个函数用于获取鼠标坐标
            this.mousedown(function (ev) {
                function getPos(ev) {
                    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
                    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
                }
                var oEvent=ev||event;
                var self=this;
                var pos=getPos(oEvent);  //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标
                disX=pos.x-self.offsetLeft;
                disY=pos.y-self.offsetTop;
                // console.log(disX);
                // console.log("pos.x="+pos.x+"||oDiv.offsetLeft="+oDiv.offsetLeft)
                document.onmousemove=function(ev)
                    /*由于要防止鼠标滑动太快跑出div，这里应该用document.
                    因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
                {
                    var oEvent=ev||event;
                    var pos=getPos(oEvent);

                    //防止div跑出可视框
                    var l=pos.x-disX;
                    var t=pos.y-disY;
                    if(l<0)
                    {
                        l=0;
                    }
                    else if(l>document.documentElement.clientWidth-self.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-self.offsetWidth;
                    }

                    if(t<0)
                    {
                        t=0;
                    }
                    else if(t>document.documentElement.clientHeight-self.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-self.offsetHeight;
                    }

                    self.style.left=l+'px';
                    self.style.top=t+'px';
                }

                document.onmouseup=function(ev)
                {
                    document.onmousemove=null; //将move清除
                    document.onmouseup=null;
                }

                return false;  //火狐的bug，要阻止默认事件
            })
        },

    })
    $("#div1").drag();
</script>
</body>
</html>
jq的封装的一个仿淘宝聊天scroll--js

猜你喜欢
