效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' # div { width : 200px；高度： 200像素；背景：绿色；绝对位置：} # div2 { width: 200px高度： 200像素；背景：金；绝对位置：top : 200pxleft : 200px }/style/head body div id=' div '/div div id=' div 2 '/div脚本窗口。onload=function(){ var div=document。getelementbyid(' div ')；div。onmousedown=function(ev){ var e=window。事件| | ev//var Mydiv=文档。getelementbyid(' div ')；//获取到鼠标点击的位置距离差异左侧和顶部边框的距离；var Ox=e . client x-div。offsetleftvar Oy=e . clienty-div。偏移顶部；//当鼠标移动，把鼠标的偏移量付给div文档。onmousemove=function(ev){//计算出鼠标在正常男性染色体组型方向上移动的偏移量，把这个偏移量加给差异的左边距和上边距，div就会跟着移动var e=window.event | | evdiv。风格。left=e . client x-Ox ' px '；div。风格。top=e . Clienty-Oy ' px '；} //当鼠标按键抬起，清除移动事件文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null } } var div 2=document。getelementbyid(' div 2 ')；第二分区。onmousedown=function(ev){ var e=window。事件| | ev//var Mydiv=文档。getelementbyid(' div ')；//获取到鼠标点击的位置距离差异左侧和顶部边框的距离；var Ox=e . client x-div 2。offsetleftvar Oy=e . clienti-div 2。偏移顶部；//当鼠标移动，把鼠标的偏移量付给div文档。onmousemove=function(ev){//计算出鼠标在正常男性染色体组型方向上移动的偏移量，把这个偏移量加给差异的左边距和上边距，div就会跟着移动var e=window.event | | evdiv 2。风格。left=e . client x-Ox ' px '；第二分区。风格。top=e . Clienty-Oy ' px '；} //当鼠标按键抬起，清除移动事件文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=null} } }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！