一，面向過程的步驟代碼與思路：

       Oimg.onmousedown=function(e){                                      鼠標(biāo)按下的函數(shù)功能
           e.preventDefault()                                           阻止（默認(rèn)值盒子跟一起動(dòng)）
          
           var a = e.clientX-this.offsetLeft     
定義一個(gè)空間=點(diǎn)擊的這個(gè)點(diǎn)到頁(yè)面左邊的距離-盒子到頁(yè)面左邊的距離
           var b=e.clientY-this.offsetTop
定義一個(gè)空間=點(diǎn)擊的這個(gè)點(diǎn)到頁(yè)面上面的距離-盒子到上面的距離
             document.onmousemove=function(e){                    鼠標(biāo)開始移動(dòng)的函數(shù)功能
（如果不用document的前綴，那么鼠標(biāo)離開盒子將不會(huì)動(dòng)，所以要用document而不能用Oimg）
           Oimg.style.left=e.clientX- a+"px"                           盒子的左邊距離的移動(dòng)=當(dāng)前的點(diǎn)到頁(yè)面的距離-點(diǎn)擊的這個(gè)點(diǎn)到頁(yè)面左邊的距離-盒子到左邊頁(yè)面的距離   
           Oimg.style.top=e.clientY- b+"px"
盒子的上邊距離的移動(dòng)=當(dāng)前的點(diǎn)到頁(yè)面的距離-點(diǎn)擊的這個(gè)點(diǎn)到頁(yè)面左邊的距離-盒子到上邊頁(yè)面的距離   
           }
       }
       Oimg.onmouseup=function(){
鼠標(biāo)松開的函數(shù)功能將頁(yè)面上的鼠標(biāo)移動(dòng)事件清除
          document.onmousemove = null;```