码迷,mamicode.com
首页 > 其他好文 > 详细

QQ面板拖拽(慕课网DOM事件探秘)(下)

时间:2017-09-13 17:23:53      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:log   get   距离   pre   max   慕课   blog   event   事件   

2.鼠标事件坐标获取

function fnDown(event) {
    var event = event || window.event;
    var oDrag = document.getElementById("loginPanel");
    //光标按下时光标和面板之间的距离;
    var disX = event.clientX - oDrag.offsetLeft;
    var disY = event.clientY - oDrag.offsetTop;
    //移动
    document.onmousemove = function (event) {
        event = event || window.event;
        fnMove(event, disX, disY);
    };
    document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
function fnMove(event, posX, posY) {
    var oDrag = document.getElementById("loginPanel");
    var l = event.clientX - posX;
    var t = event.clientY - posY;
    var winW = document.documentElement.clientWidth;
    var winH = document.documentElement.clientHeight;
    var maxW = winW - oDrag.offsetWidth - 10;
    var maxH = winH - oDrag.offsetHeight;
    //当l=0时,窗口不能继续外移
    if (l < 0) {
        l = 0;
    } else if (l > maxW) {
        l = maxW;
    }

    if (t < 10) {
        t = 10;
    } else if (t > maxH) {
        t = maxH;
    }

    oDrag.style.left = l + "px";
    oDrag.style.top = t + "px";
}

3.封装各浏览器通用的getElementsByClassName()方法

方法返回的是一个数组,切记

 

function getByClass(clsName, 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 == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}

 

QQ面板拖拽(慕课网DOM事件探秘)(下)

标签:log   get   距离   pre   max   慕课   blog   event   事件   

原文地址:http://www.cnblogs.com/sunxirui00/p/7515648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!