『转载』标准的 手写 纯Js 的 DIV层的 拖拽
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>一个简单的js鼠标拖拽div层效果丨芯晴网页特效丨CsrCode.Cn</title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 function drag(elementToDrag,event){ 9 var startX=event.clientX,startY=event.clientY; 10 var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop; 11 var deltaX=startX-origX,deltaY=startY-origY; 12 if(document.addEventListener){ 13 document.addEventListener("mousemove",moveHandler,true); 14 document.addEventListener("mouseup",upHandler,true); 15 } 16 else{ 17 elementToDrag.setCapture(); 18 elementToDrag.attachEvent("onmousemove",moveHandler); 19 elementToDrag.attachEvent("onmouseup",upHandler); 20 elementToDrag.attachEvent("onlosecapture",upHandler); 21 } 22 if(event.stopPropagation) event.stopPropagation(); 23 else event.cancelBubble=true; 24 25 if(event.preventDefault) event.preventDefault(); 26 else event.returnValue=false; 27 function moveHandler(e){ 28 if(!e) e=window.event; 29 elementToDrag.style.left=(e.clientX-deltaX)+"px"; 30 elementToDrag.style.top=(e.clientY-deltaY)+"px"; 31 elementToDrag.style.zIndex="10"; 32 elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>"; 33 if(e.stopPropagation) e.stopPropagation(); 34 else e.cancelBubble = true; 35 } 36 function upHandler(e){ 37 if(!e) e=window.event; 38 elementToDrag.style.zIndex="1"; 39 if(document.removeEventListener){ 40 document.removeEventListener("mouseup",upHandler,true); 41 document.removeEventListener("mousemove",moveHandler,true); 42 } 43 else{ 44 elementToDrag.detachEvent("onlosecapture",upHandler); 45 elementToDrag.detachEvent("onmouseup",upHandler); 46 elementToDrag.detachEvent("onmousemove",moveHandler); 47 elementToDrag.releaseCapture(); 48 } 49 if(e.stopPropagation) e.stopPropagation(); 50 else e.cancelBubble=true; 51 } 52 } 53 </script> 54 <div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00"> 55 <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div> 56 <p>test</p> 57 </div> 58 <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00"> 59 <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div> 60 <p>test</p> 61 </div> 62 <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00"> 63 <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div> 64 <p>test</p> 65 </div> 66 </body> 67 </html>
分类:
JS高级插件设计
标签:
手写JS 拖拽DIV
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述