拖拽的面向过程

一,面向过程的步骤代码与思路:

       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;```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,025评论 25 708
  • //我所经历的大数据平台发展史(三):互联网时代 • 上篇http://www.infoq.com/cn/arti...
    葡萄喃喃呓语阅读 51,290评论 10 200
  • 自在 自得 本我 归我。寻寻觅觅,我们一直在找寻,在专注于当下的生活中逐渐了解自己,看清自己的喜恶,认清自己的底线...
    菊子宝宝阅读 288评论 0 1
  • 时间永远都是过得那么的快,就好像一点感觉都没有似的。记得在本山大叔的小品里说了这样的一句话“眼睛一闭一睁一天过...
    浏小煚拓阅读 818评论 0 0
  • 回头看以前写的文章,庆幸自己当时记录了下来,否则都有点忘记了当时的慌乱、无助、焦灼感。 现在孩子一岁多了,我的日子...
    莹莹_阅读 397评论 0 1