时间:2021-07-01 10:21:17 帮助过:30人阅读
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> #box { width:100px; height:100px; background:#ff0099; position:absolute; } .box1 { border:1px solid #000000; position:absolute; } </style> </head> <body> <p id = 'box'></p> <script> var box = document.getElementById('box'); box.onmousedown = function(e){ var box1 = document.createElement("p"); document.body.appendChild(box1); box1.style.width = box.offsetWidth + 'px'; box1.style.height = box.offsetHeight + 'px'; box1.style.left = box.offsetLeft + 'px'; box1.style.top = box.offsetTop + 'px'; box1.className = 'box1'; e = e || event; //计算鼠标在盒子中的位置; var x = e.pageX - box.offsetLeft; var y = e.pageY - box.offsetTop; document.onmousemove = function(e){ e = e || event; //计算盒子在页面上的坐标; var xx = e.pageX - x; var yy = e.pageY - y; box1.style.left = xx + 'px'; box1.style.top = yy + 'px'; document.onmouseup = function(){ box.style.left = box1.offsetLeft + 'px'; box.style.top = box1.offsetTop + 'px'; document.body.removeChild(box1); document.onmousemove = 'null'; } return false; } } </script> </body> </html>
以上就是js实现带框的拖拽效果的详细内容,更多请关注Gxl网其它相关文章!