效果如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html> <html> <head> <title></title> <style type= "text/css" > body{position:relative;} *{padding:0;margin:0;} .dialog{width:400px;height:400px;border:1px solid #ddd;position: fixed ;top:100px;left:200px;} .dialog h2{height:40px;background:purple;cursor:move;} .mask{position: fixed ;width:0;height:0;left:0;top:0;display:none;border: 3px solid #eee;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.07);cursor:move;} </style> </head> <body> <div class = "dialog" id= "box" > <h2 id= 'digTit' ></h2> </div> <div class = "mask" ></div> <script type= "text/javascript" > var dragEle = document.getElementById( 'digTit' ) var box = document.getElementById( 'box' ) var x,y // 物体离上边,下边的距离 var moveBox = document.querySelector( '.mask' ) // 移动的是这层 // 设置居中 var oldX = (document.documentElement.clientWidth-box.offsetWidth)/2 var oldY = (document.documentElement.clientHeight-box.offsetHeight)/2 box.style.left = oldX + 'px' box.style.top = oldY + 'px' moveBox.style.left = oldX + 'px' moveBox.style.top = oldY + 'px' moveBox.style.width = box.offsetWidth + 'px' moveBox.style.height = box.offsetHeight + 'px' digTit.addEventListener( 'mousedown' , function (e) { moveBox.style.display = 'block' var beginX = e.clientX var beginY = e.clientY document.addEventListener( 'mousemove' , move, false ) document.addEventListener( 'mouseup' , up, false ) function move(e) { x = oldX + e.clientX - beginX y = oldY + e.clientY - beginY moveBox.style.left = x + 'px' moveBox.style.top = y + 'px' } function up(e) { box.style.left = x + 'px' box.style.top = y + 'px' oldX = x oldY = y moveBox.style.display = 'none' document.removeEventListener( 'mousemove' , move, false ) document.removeEventListener( 'mouseup' , up, false ) } }, false ) </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 深度学习基础理论————CV中常用Backbone(Resnet/Unet/Vit系列/多模态系列等