一,面向过程的步骤代码与思路:
Oimg.onmousedown=function(e){ 鼠标按下的函数功能
e.preventDefault() 阻止(默认值盒子跟一起动)
var a = e.clientX-this.offsetLeft
定义一个空间=点击的这个点到页面左边的距离-盒子到页面左边的距离
var b=e.clientY-this.offsetTop
定义一个空间=点击的这个点到页面上面的距离-盒子到上面的距离
document.onmousemove=function(e){ 鼠标开始移动的函数功能
(如果不用document的前缀,那么鼠标离开盒子将不会动,所以要用document而不能用Oimg)
Oimg.style.left=e.clientX- a+"px" 盒子的左边距离的移动=当前的点到页面的距离-点击的这个点到页面左边的距离-盒子到左边页面的距离
Oimg.style.top=e.clientY- b+"px"
盒子的上边距离的移动=当前的点到页面的距离-点击的这个点到页面左边的距离-盒子到上边页面的距离
}
}
Oimg.onmouseup=function(){
鼠标松开的函数功能将页面上的鼠标移动事件清除
document.onmousemove = null;```