dom03

最新推荐文章于 2025-08-23 08:00:22 发布

转载最新推荐文章于 2025-08-23 08:00:22 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xl900912/p/4221997.html

文章标签：

#xhtml

本文介绍了一个简单的拖拽效果实现方法，使用JavaScript通过class选择器获取元素，并监听鼠标事件完成拖拽操作。文章提供了完整的代码示例，展示了如何计算鼠标与被拖拽元素的位置关系，并限制元素在窗口内的移动范围。

鼠标事件：

键盘事件：

//通过class获取元素，封装一个通过class获取元素的方法
//IE10以下不支持document.getElementByClass()
function getByClass(className,parent){//必须的元素（前面），可选的元素
    var oParent=parent?document.getElementById(parent):document,//如果有父元素传递过来，不传递父元素对象，而是传父元素上的ID；如果没传父元素就用document
        eles=[],
        elements=oParent.getElementsByTagName('*');//获取所有元素
    for(var i=0,l=elements.length;i<l;i++){//遍历所有元素,可以同时初始化多个变量
        if(elements[i].className==className){//等于传过来的className
            eles.push(elements[i]);
        }
    }
    return eles;
}
window.onload=drag;
function drag(){
    var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//数组中第一个元素;当前元素，父元素
    //拖曳的操作
    oTitle.onmousedown=fnDown;
    }
//鼠标事件都是在浏览器窗口中的特定位置上发生的。
//这个位置信息保存在事件的clientX和clientY属性中
//所有浏览器都支持这两个属性
//他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
function fnDown(event){
    var oDrag=document.getElementById('loginPanel');
    // document.onmousemove=function(event){//变量event接收事件对象
    //     event=event||window.event;//非IE 和IE浏览器对象不一样
    //     //document.title=event.clientX+','+event.clientY;
    //     oDrag.style.left=event.clientX+'px';
    //     oDrag.style.top=event.clientY+'px';
    //光标按下时光标和面板之间的距离
    disX=event.clientX-oDrag.offsetLeft,
    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(e,posX,posY){
    var oDrag=document.getElementById('loginPanel');
    var 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,
        maxH=winH-oDrag.offsetHeight;
        if(l<0){
            l=0;
        }
        else if(l>maxW){
            l=maxW;
        }
        if(t<0){
            t=0;
        }else if(t>maxH){
            t=maxH;
        }
    oDrag.style.left=l+'px';
    oDrag.style.top=t+'px';
    document.title=l;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        .login_logo_webqq{background-color: white; height: 8px; width: auto;}
        .loginPanel{position: absolute;width: 80px; height: 40px; background-color: blue; border:1px solid blue;border-radius: 5px;}
    </style>
    <script src="drag.js"></script>
</head>
<body>
    <div class='div'>
        <div class='loginPanel'  id='loginPanel'>
            <div class='login_logo_webqq'></div>
        </div>
    </div>
</body>
</html>