|
#2
mwnb2020-03-26 18:39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0px;margin:0px;}
.odv1{width: 100px;height:100px;background:yellow;position: absolute;}
.obox{border:1px black dashed;position:absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
var odv1=document.getElementsByTagName('div')[0];
odv1.onmousedown=function(ev){
var oEven=ev||even;
var opointx=oEven.clientX-odv1.offsetLeft;
var opointy=oEven.clientY-odv1.offsetTop;
var odv2=document.createElement('div');
odv2.style.className="obox";
odv2.style.width=odv1.offsetWidth+"px";
odv2.style.height=odv1.offsetHeight+"px";
document.body.appendChild(odv2);
document.onmousemove=function(oev){
var oEven1=oev||even;
var lf1=oEven1.clientX;
var tp1=oEven1.clientY;
var ol=lf1-opointx;
var op=tp1-opointy;
odv1.style.left=ol+"px";
odv1.style.top=op+"px";
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false
};
}
</script>
</head>
<body>
<div class="odv1"></div>
</body>
</html>
）