可以随鼠标拖拽的div

可以拖拽的div

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以拖拽的div</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.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;
    };
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
复制代码

 

posted @   Monroe_Yu  阅读(162)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛