移动窗口

最新推荐文章于 2019-03-22 14:26:00 发布

nextvary

最新推荐文章于 2019-03-22 14:26:00 发布

阅读量387

点赞数

分类专栏： javascript 文章标签： html5

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML元素拖动示例，通过使用jQuery库实现页面元素的鼠标拖拽功能。该示例限制了元素在页面内的移动范围，并禁用了元素的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    #drag{position:absolute;top:100px;left:100px;width:400px;height:400px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
</style>
<body>
    <div id="drag">
        <h1 style="text-align:center;">拖动</h1>
    </div>
</body>
</html>
<script>
drag();
function drag(){
    $('#drag').mousedown(function(event){
        this.style.cursor="move";
        var event = event || window.event;
        //点击位置-偏移位置
        var disX=event.clientX-this.offsetLeft;
        var disY=event.clientY-this.offsetTop;
        document.onmousemove=function(event){
            var event = event || window.event;
            maxW=document.documentElement.clientWidth-$('#drag')[0].offsetWidth;
            maxH=document.documentElement.clientHeight-$('#drag')[0].offsetHeight;
            posX=event.clientX-disX;
            posY=event.clientY-disY;
            if(posX<0){
                posX=0;
            }else if(posX>maxW){
                posX=maxW;
            }
            if(posY<0){
                posY=0;
            }else if(posY>maxH){
                posY=maxH;
            }
            $('#drag')[0].style.left=posX+'px';
            $('#drag')[0].style.top=posY+'px';
        }
        document.onmouseup=function(){
            $('#drag')[0].style.cursor="default";
            document.onmousemove=null;
            document.onmouseup=null;
        }
    });
    $("#drag").attr("onselectstart","return false").css({
        "user-select": "none" 
    })
}
</script>