zoukankan      html  css  js  c++  java
  • 拜师的第一课 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 ~





       
     


  • 相关阅读:
    "Serialization.SerializationException: 在分析完成之前就遇到流结尾”解决方法
    导出你的GAC Assembly中的DLLS
    SMTP无法发送邮件
    Feature"xxx" for list template "xxx" is not installed in this farm
    一个application多个 URL
    将sharepoint的list绑定到Infopath的下拉框
    Value was either too large or too small for a UInt32
    Event ID 5553 failure trying to synch site"xxxx" for ContentDB "xx" WebApp "xx". Exception message was Cannot insert duplicate key row in object 'dbo.UserMemberships' with unique index
    System.InvalidOperationException: 工作流的事件接收器上下文无效。
    Cannot open Proj.enUS.resx: no such file or folder
  • 原文地址:https://www.cnblogs.com/doublefishes/p/3047008.html
Copyright © 2011-2022 走看看