在原来的基础上修改了一下,变成有边框的拖拽了,废话不多说,直接上代码、
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <title>带框的拖拽</title> <style> *{margin:0;padding:0;} #div1{width:100px; height:100px; position:absolute; background:red;cursor:move;overflow:hidden;border-radius:8px;} .div2{border:1px dotted #333;position:absolute;border-radius:8px;} </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); var disX=disY=0; oDiv.onmousedown=function(event){ var event=event || window.event; disX=event.clientX-oDiv.offsetLeft; //判断鼠标在div的X轴位置 disY=event.clientY-oDiv.offsetTop; //判断鼠标在div的y轴的位置 var oBox=document.createElement("div"); oBox.className="div2"; oBox.style.width=(oDiv.offsetWidth-2)+"px";//为oBox的宽赋值 oBox.style.height=(oDiv.offsetHeight-2)+"px"; //为oBox 的高赋值 oBox.style.left=oDiv.offsetLeft+"px";//oBox的初始位置 oBox.style.top=oDiv.offsetTop+"px"; document.body.appendChild(oBox); if(oDiv.setCapture){ //兼容ie的事件捕获 oDiv.onmousemove=move; oDiv.onmouseup=up; oDiv.setCapture(); }else{ document.onmousemove=move; //兼容ff chrome document.onmouseup=up; } function move(event){ var event=event||window.event; var l=event.clientX-disX; var t=event.clientY-disY; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-oBox.offsetWidth){ l=document.documentElement.clientWidth-oBox.offsetWidth; } if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-oBox.offsetHeight){ t=document.documentElement.clientHeight-oBox.offsetHeight; } oBox.style.left=l+"px"; oBox.style.top=t+"px"; } function up(){ oDiv.style.left=oBox.offsetLeft+'px'; oDiv.style.top=oBox.offsetTop+'px'; document.body.removeChild(oBox); this.onmousemove=null; this.onmouseup=null; if(oDiv.releaseCapture){ oDiv.releaseCapture(); } } return false; }; } </script> </head> <body> <div id="div1"></div> </body> </html>