代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } #box{ width:150px; height:150px; background:sandybrown; position: absolute; border:2px solid #ccc; } img{ width:100%; height:100%; } #center{ width:200px; height:160px; background:seagreen; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-80px; } </style> </head> <body> <div id="box"><img src="images/1.jpeg" alt=""></div> <div id="center"></div> <script> /* 1.鼠标按下事件 onmousedown 2.鼠标移动事件 onmousemove 3.鼠标抬起事件 onmouseup */ var box = document.getElementById('box'); var center = document.getElementById('center'); // 鼠标按下 box.onmousedown = function(ev){ var eve = event || ev; var X = eve.clientX - box.offsetLeft; // 鼠标相对于box元素内部左边距 var Y = eve.clientY - box.offsetTop; // 鼠标相对于box元素内部上边距 // 鼠标移动 变成 页面移动 document.onmousemove = function(ev){ var eve = event || ev; box.style.left = eve.clientX - X + 'px'; // 移动时，鼠标相对于浏览器左侧左边距 - 鼠标相对于box元素内部左边距 = 移动时元素应该坐落的横坐标 box.style.top = eve.clientY - Y + 'px'; // 四周范围判断 if(eve.clientX - X <=0){ box.style.left = 0 + 'px'; } if(eve.clientY - Y <=0 ){ box.style.top = 0 + 'px'; } if(eve.clientX - X >= document.documentElement.clientWidth - box.offsetWidth){ box.style.left = document.documentElement.clientWidth - box.offsetWidth + 'px' ; } if(eve.clientY - Y >= document.documentElement.clientHeight - box.offsetHeight){ box.style.top = document.documentElement.clientHeight - box.offsetHeight + 'px' } // 碰撞检测 if(eve.clientX - X + box.offsetWidth >= center.offsetLeft && eve.clientY - Y + box.offsetHeight >= center.offsetTop && eve.clientX - X <= center.offsetLeft + center.offsetWidth && eve.clientY - Y <= center.offsetTop + center.offsetHeight ){ center.style.background = 'gray'; }else{ center.style.background = ''; } } // 鼠标抬起 document.onmouseup = function(){ // 移动、抬起事件置空 document.onmousemove = null; document.onmouseup = null; } return false; // 去除浏览器默认样式，如：文字选中，图片拖拽等 } </script> </body> </html>
效果
