拜师的第一课 js实现div拖动功能

一段偶合,拜老张为师。

老张说,我带了很多徙弟,没有一个出师的,不管是男的还是女的,老的还是少的 。

我心里想着我会出师的,当然也是我觉得我至少要突破给自己定下的标准。

老张说,javascript比较复杂,记得要坚持。

最后,老张说,我每次教徙弟,第一课作业都是让徙弟实现一个高宽都为100px 的div 的拖动,不能抄网上的。

于是我开始动工了,但我是一头雾水的,只能网上找例子。

在我搞清楚大量函数方法,变量之后,我凭着自己的记忆跟少少理解照班了例子,其实不算是我自己写的吧。

<script type="text/jscript">
var dragger = document.getElementById('drag');
dragger.onmousedown = function(a){
    if(!a)a=window.event;//浏览器事件对象兼容
    var ax = a.layerX?a.layerX:a.offsetX;//如果 bbb.layerX 没有值,就取a.offsetX;的位置
    var ay = a.layerY?a.layerY:a.offsetY;
dragger.onmousemove= function(b){
    if(!b)b=window.event;
    dragger.style.left = b.clientX - ax + 'px';
    dragger.style.top = b.clientY - ay + 'px';
    }
dragger.onmouseup = function(){
 dragger.onmousemove = null;
 }
    }
//onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
//onMouseout 当鼠标离开 。。
//onMouseUP 当鼠标 按下又抬起。。。
//onmousemove 当鼠标移动。。
//onmousedown 当鼠标按下时。。
</script>

 忐忑的发给老张,他竟然说就要这么简单的,然后修改了让我分析出来说会有很大的提高。

onload = function(){
        var d=document,g="getElementById";
        var drag = d[g]("drag");
        var me = this;
        drag.onmousedown = function(event){
                 event = event || me.event;
                 var ax = event.layerX?event.layerX:event.offsetX;
                 var ay = event.layerY?event.layerY:event.offsetY;
                 d.onmousemove = function(event){
                           event = event || me.event;
                           var dx = event.clientX;
                           var dy = event.clientY;
                           drag.style.left = dx - ax + 'px';
                           drag.style.top  = dy - ay + 'px';
                     }
                 d.onmouseup = function(){
                          this.onmousemove = null;
                          this.onmouseup = null;
                     }
            }
    }

解释:

1:其实js 基于window 也就是说大家都是基于window 那好办了 。window 省掉不写了 比如你alert,其实是window.alert 。


2:在一个页面就只一次定义window.onload,多次定义呢 会不会覆盖前面的 ?会  所以可以写一个这样的方法
  var a = window.onload;
      window.onload = funciton(){
           if(typeof a == "function"){a();}

3:函数式编程有一个等值公设,也就是说把标准的变量名,变成一个简短的;

4:|| 是python 语法  aa && bb || cc   如果aa 为真 则执行bb 否则执行cc ,  跟三元运算符不同,?:一定要三个一起;

5:var me = this; this多用于函数内部,它永远指向调用他的那个对象;

6:drag.onmousedown这个事件要包含着里边2个事件呢
    这个事件的作用域,然后鼠标放开后要把事件全放掉 ,这样的话做大项目标就不会有偶合了。

老张问我懂了没,其实我头还是晕晕的,经过一轮知识的轰炸,我要慢慢消化.....

老张后来说,javascript 核心的就是二个链表,作用域链表,和原型链表,在这二个链表的基础上,产生了,闭包,函数式  其实没什么高深的东西 。
我期待着,有一天我回过头来看我学习javascript的过程,也跟其他人说:其实没什么高深的东西!

感谢师傅老张, 加油哇  lilili ~





   
 


原文地址:https://www.cnblogs.com/doublefishes/p/3047008.html