拖动元素实现-优快云博客

本文介绍了一个简单的JavaScript拖动效果实现方案。通过监听鼠标按下事件，计算鼠标与元素的位置关系，并在鼠标移动时调整元素位置，同时设置了边界条件避免元素移出可视区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function $(id){
    return document.getElementById(id);    
}
    
window.onload =    function(){
    
        $('aaa').onmousedown=function(event){
                event = event || window.event;   //处理事件兼容问题
                var disX = event.clientX - $('aaa').offsetLeft,  //光标到浏览器窗口左边的值 —— div距离浏览器左边的值
                    disY = event.clientY - $('aaa').offsetTop;   //光标到浏览器窗口顶部的值 —— div距离浏览器上边的值
                
                document.onmousemove = function(event){      //鼠标移动时执行 一个函数
                    event = event || window.event;
                    move(event,disX,disY);                 //调用函数
                }
                
                document.onmouseup = function(){
                    document.onmousemove = null;    
                    document.onmouseup = null;    
                }
        }
}
 
function move(e,x,y){
    var l = e.clientX - x,    //光标到浏览器窗口左边的值 - 光标距离div左边的值
        t = e.clientY - y,    //光标到浏览器窗口上边的值 - 光标距离div上边的值
        w = document.documentElement.clientWidth || document.body.clientWidth,   //浏览器窗口的宽度
        h = document.documentElement.clientHeight || document.body.clientHeight, //浏览器窗口的高度
        maxW = w - $('aaa').offsetWidth,    //浏览器窗口的宽度  ——  div自身的宽度    
        maxH = h - $('aaa').offsetHeight;   //浏览器窗口的高度  ——   div自身的高度
        
    if(l<0){        //设置边界
        l = 0;    
    }else if(l>maxW){
        l = maxW;    
    };
    
    if(t<0){
        t = 0;    
    }else if(t>maxH){
        t = maxH;    
    };
    
    $('aaa').style.left = l + 'px';
    $('aaa').style.top = t + 'px';
    
  
    
}