拖拽原理

时间：2014-11-23 01:54:41 阅读：122 评论：0 收藏：0 [点我收藏+]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://457375608.github.io/liujin/scripts/jquery-1.8.3.min.js"></script>
<style>
#div{width:300px;height:300px;background:#f00;position:absolute}
</style>
<script>
/*
 *鼠标按下
 *
 *鼠标拖动
 *
 *鼠标抬起
 * 
 */
/*window.onload=function(){
    var oDiv=document.getElementById("div");
    oDiv.onmousedown=function(event){
        var disX=event.clientX-oDiv.offsetLeft;
        var disY=event.clientY-oDiv.offsetTop;
        document.onmousemove=function(event){
            var l=event.clientX-disX;
            var t=event.clientY-disY;
            if(l<0){
                l=0    
            }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                l=document.documentElement.clientWidth-oDiv.offsetWidth
            };
            if(t<0){
                t=0
            }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                t=document.documentElement.clientHeight-oDiv.offsetHeight
            }
            oDiv.style.left=l+"px";
            oDiv.style.top=t+"px";
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;    
        };
        return false;    
    }    
}*/

$(function(){
    var oDiv=$("#div");
    oDiv.mousedown(function(event){
        var offset=oDiv.offset();
        var disX=event.clientX-offset.left;
        var disY=event.clientY-offset.top;
        $(document).on("mousemove",function(event){
            var l=event.clientX-disX;
            var t=event.clientY-disY;
            if(l<0){
                l=0    
            }else if(l>$(window).width()-oDiv.width()){
                l=$(window).width()-oDiv.width()
            };
            if(t<0){
                t=0    
            }else if(t>$(window).height()-oDiv.height()){
                t=$(window).height()-oDiv.height()    
            }
            //oDiv.css({left:l,top:t})    
            oDiv.offset({left:l,top:t})
        });
        $(document).mouseup(function(){
            $(document).off("mousemove mouseup")    
        });
        return false;    
    })    
})
</script>
</head>

<body>
<div id="div"></div>
</body>
</html>

拖拽原理

标签：style blog http io ar color os sp on

原文地址：http://www.cnblogs.com/liujin0505/p/4116066.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行