问答详情
源自:4-2 [DOM事件] QQ面板拖拽效果(下)

求帮忙看看哪错了..拖曳不动

摔!!明明是按照视频一条一条写的啊..写到有bug的那个还能拖曳,然后改完之后就拖不动了...

//封装通过class获取元素的函数
  function getByClass(clName,parent){
    //首先把父元素取出来,如果传了父元素,那么我们希望返回的是父元素的id,如果没有传,那么父元素就是document
    var oParent=parent?document.getElementById(parent):document,
    //定义一个数组,这个数组将用来装从所有元素中取到的有改class的元素
        eles=[],
        //取出所有元素
        elements=document.getElementsByTagName('*');
        for (var i = 0; i < elements.length; i++) {
          eles.push(elements[i]);
        }
        //返回我们取到的数组
        return eles;
  }

  window.onload=drag;
  //整个拖曳过程分为三步
  //1、确定用户点击的是log部分的区域
  function drag(){
    //用getByClass取到改div
    var oTitle=getByClass("login_logo_webqq","loginPanel")[0];
    //onmousedown鼠标点击时发生
    oTitle.onmousedown=fnDown;
  }
  function fnDown(event){
    event=event||window.event;//兼容
    //把整个面板取出来
    var oDrag=document.getElementById('loginPanel'),
      //光标按下时光标和面板之间的距离
        disX=event.clientX-oDrag.offsetLeft,
        disY=event.clientY-oDrag.offsetTop;
      //移动
    document.onmousemove=function(event){
        event=event||window.event;
        fnMove(event,disX.disY);
    };
  }
  function fnMove(e,posX,posY){
    var oDrag=document.getElementById('loginPanel'),
        l=e.clientX-posX,
        t=e.clientY-posY;
    oDrag.style.left=l+"px";
    oDrag.style.top=t+"px";
  }


提问者:秋挽词 2016-12-26 22:16

个回答

  • LetWeGo丶
    2019-01-07 17:15:32

    可以chrom按F12查看错误信息哦~~!

  • qq_玲玲的大_04311806
    2016-12-26 23:40:12

    for (var i = 0; i < elements.length; i++) {

         if(elements[i].className == clsName){

         eles.push(elements[i]);

         }

    }

    写掉了一句!