为什么我收不到X的值。

来源:4-2 [DOM事件] QQ面板拖拽效果(下)

GiveMeGeek

2016-07-18 11:16

function getByClass(claName,parent){

var oParent = parent?document.getElementById(parent):document,

eles = [],

elements = oParent.getElementsByTagName('*');


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

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

eles.push(elements[i]);

}

}

return eles;

}


window.onload = drag;


function drag(){

var oTitle = getByClass("login_logo_webqq","loginPanel")[0];


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.title = disY;

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,

winW = document.documentElement.clientWidth || document.body.clientWidth,

winH = document.documentElement.clientHeight || document.body.clientHeight,

maxW = winW - oDrag.offsetWidth-10,

maxH = winH - oDrag.offsetHeight;


document.title = t;

if(l<0){

l = 0;

}else if(l>maxW){

l = maxW;

}

if(t<0){

t = 10;

}else if(t>maxH){

t = maxH;

}


oDrag.style.left = l + 'px';

oDrag.style.top = t + 'px';

}


写回答 关注

1回答

  • GiveMeGeek
    2016-07-18 11:25:33

    已解决。

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99532 学习 · 1298 问题

查看课程

相似问题