拖放图像

  1. <html>
  2. <head>
  3. <style>
  4. img
  5. {
  6. position:relative;
  7. }
  8. </style>
  9. <script type="text/javascript">
  10. mouseover=true
  11. function coordinates()
  12. {
  13. if (!moveMe)
  14.     {
  15.     return
  16.     }
  17. if (event.srcElement.id=="moveMe")
  18.     {
  19.     mouseover=true
  20.     pleft=document.getElementById('moveMe').style.pixelLeft
  21.     ptop=document.getElementById('moveMe').style.pixelTop
  22.     xcoor=event.clientX
  23.     ycoor=event.clientY
  24.     document.onmousemove=moveImage
  25.     }
  26. }
  27.  
  28. function moveImage()
  29. {
  30. if (mouseover&&event.button==1)
  31.     {
  32.     document.getElementById('moveMe').style.pixelLeft=pleft+event.clientX-xcoor
  33.     document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor
  34.     return false
  35.     }
  36. }
  37.  
  38. function mouseup()
  39. {
  40. mouseover=false
  41. }
  42. document.onmousedown=coordinates
  43. document.onmouseup=mouseup
  44. </script>
  45. </head>
  46. <body>
  47. <img id="moveMe" src="/i/eg_smile.gif" /><br />
  48. <b>请拖动这幅图像。</b>
  49. </body>
  50. </html>