HTML+js实现鼠标绘制可拖动矩形

最新推荐文章于 2024-07-08 08:00:00 发布

baolin811

最新推荐文章于 2024-07-08 08:00:00 发布

阅读量1.2w

点赞数 8

分类专栏：前端文章标签：前端

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html> 
 
 <html> 
 
 <head> 
 
 <meta charset= 
 "gb2312"  
 /> 
 
 <title></title> 
 
 <style type= 
 "text/css" 
 > 
 
 .box { 
 
 background:  
 #f00; 
 
 width: 0px; 
 
 height: 0px; 
 
 position: absolute; 
 
 opacity: 0.5; 
 
 cursor: move; 
 
 } 
 
 </style> 
 
 <script type= 
 "text/javascript" 
 > 
 
 window.onload =  
 function 
 (e) { 
 
 e = e || window.event; 
 
 // startX, startY 为鼠标点击时初始坐标 
 
 // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动 
 
 var  
 startX, startY, diffX, diffY; 
 
 // 是否拖动，初始为 false 
 
 var  
 dragging =  
 false 
 ; 
 
 // 鼠标按下 
 
 document.onmousedown =  
 function 
 (e) { 
 
 startX = e.pageX; 
 
 startY = e.pageY; 
 
 // 如果鼠标在 box 上被按下 
 
 if 
 (e.target.className.match(/box/)) { 
 
 // 允许拖动 
 
 dragging =  
 true 
 ; 
 
 // 设置当前 box 的 id 为 moving_box 
 
 if 
 (document.getElementById( 
 "moving_box" 
 ) !==  
 null 
 ) { 
 
 document.getElementById( 
 "moving_box" 
 ).removeAttribute( 
 "id" 
 ); 
 
 } 
 
 e.target.id =  
 "moving_box" 
 ; 
 
 // 计算坐标差值 
 
 diffX = startX - e.target.offsetLeft; 
 
 diffY = startY - e.target.offsetTop; 
 
 } 
 
 else  
 { 
 
 // 在页面创建 box 
 
 var  
 active_box = document.createElement( 
 "div" 
 ); 
 
 active_box.id =  
 "active_box" 
 ; 
 
 active_box.className =  
 "box" 
 ; 
 
 active_box.style.top = startY +  
 'px' 
 ; 
 
 active_box.style.left = startX +  
 'px' 
 ; 
 
 document.body.appendChild(active_box); 
 
 active_box =  
 null 
 ; 
 
 } 
 
 }; 
 
 // 鼠标移动 
 
 document.onmousemove =  
 function 
 (e) { 
 
 // 更新 box 尺寸 
 
 if 
 (document.getElementById( 
 "active_box" 
 ) !==  
 null 
 ) { 
 
 var  
 ab = document.getElementById( 
 "active_box" 
 ); 
 
 ab.style.width = e.pageX - startX +  
 'px' 
 ; 
 
 ab.style.height = e.pageY - startY +  
 'px' 
 ; 
 
 } 
 
 // 移动，更新 box 坐标 
 
 if 
 (document.getElementById( 
 "moving_box" 
 ) !==  
 null  
 && dragging) { 
 
 var  
 mb = document.getElementById( 
 "moving_box" 
 ); 
 
 mb.style.top = e.pageY - diffY +  
 'px' 
 ; 
 
 mb.style.left = e.pageX - diffX +  
 'px' 
 ; 
 
 } 
 
 }; 
 
 // 鼠标抬起 
 
 document.onmouseup =  
 function 
 (e) { 
 
 // 禁止拖动 
 
 dragging =  
 false 
 ; 
 
 if 
 (document.getElementById( 
 "active_box" 
 ) !==  
 null 
 ) { 
 
 var  
 ab = document.getElementById( 
 "active_box" 
 ); 
 
 ab.removeAttribute( 
 "id" 
 ); 
 
 // 如果长宽均小于 3px，移除 box 
 
 if 
 (ab.offsetWidth < 3 || ab.offsetHeight < 3) { 
 
 document.body.removeChild(ab); 
 
 } 
 
 } 
 
 }; 
 
 }; 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <p>点击鼠标左键并拖动绘制矩形</p> 
 
 </body> 
 
 </html>