QQ面板拖拽（慕课网DOM事件探秘）（上）

最新推荐文章于 2024-11-07 22:43:35 发布

nqxcwl

最新推荐文章于 2024-11-07 22:43:35 发布

阅读量289

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hbk0kbjhci1j&title=QQ%E9%9D%A2%E6%9D%BF%E6%8B%96%E6%8B%BD%EF%BC%88%E6%85%95%E8%AF%BE%E7%BD%91DOM%E4%BA%8B%E4%BB%B6%E6%8E%A2%E7%A7%98%EF%BC%89%EF%BC%88%E4%B8%8A%EF%BC%89

版权

前端专栏收录该内容

241 篇文章 0 订阅

订阅专栏

QQ面板拖拽，效果如图

JavaScript代码如下：

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;
}

window.onload = drag;

function drag() {
    var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
    //拖页
    oTitle.onmousedown = fnDown;
    //关闭页面
    var close = document.getElementById("ui_boxyClose");
    close.onclick = winClose;
    //切换状态
    var loginState = document.getElementById("loginState");
    var stateList = document.getElementById("loginStatePanel");
    var lis = stateList.getElementsByTagName("li");
    var stateTxt = document.getElementById("login2qq_state_txt");
    var loginStateShow = document.getElementById("loginStateShow");
    //点击显示下拉单
    loginState.onclick = function (e) {
        stateList.style.display = "block";
        //阻止事件冒泡；
        e = event || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    };
    //鼠标滑过,背景变色
    for (var i = 0; i < lis.length; i  ) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = "#888";
        };
        lis[i].onmouseout = function () {
            this.style.backgroundColor = "#fff";
        };
        //鼠标点击，txt改变，图标改变
        lis[i].onclick = function (e) {
            stateList.style.display = "none";
            //阻止事件冒泡
            e = event || window.event;
            if(typeof e.stopPropagation){
                e.stopPropagation();
            }else {
                e.cancelBubble = true;
            }
            var id = this.id;
            loginStateShow.className = "login-state-show " id;
            var text = getByClass("stateSelect_text",id)[0].innerHTML;
            stateTxt.innerHTML = text;
        }

    }
    document.onclick = function () {
        stateList.style.display = "none";
    }
}

function winClose() {
    var box = document.getElementById("loginPanel");
    box.style.display = "none";
}

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";


}