                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /鼠标拖拽效果

变量声明位置

<script type="text/javascript">
    var oDrag = document.getElementById('draggable');
    var isDraging = false;
    // var lisX = 0;为什么这里变量不声明，到用时声明会出现鼠标按下后会跑到元素左上角
    // var lisY = 0;
    oDrag.addEventListener('mousedown',function(e){
        //鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动） 
        e=e||window.event;
         isDraging=true;
        var lisX=e.pageX-oDrag.offsetLeft;//就是这里前边声明var
        var lisY=e.pageY-oDrag.offsetTop;
    })
    document.onmouseup = function(e){
        //鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
      isDraging=false;
    }

于梦中

2016-04-20

源自：鼠标拖拽效果 8-2

关注问题我要回答

1339

操作

收起

2 回答

我有一只猫回答被采纳 +3 积分
2016-04-20

var 在函数中声明的是一个局部变量，如果不带var直接在函数中写变量名的话就是一个全局变量。作用于整个文件。另外鼠标跑到元素的左上角不是在鼠标点击的时候发生的，而是在鼠标移动的时候发生的。那是因为你在点击事件中声明了一个局部变量，不能在移动函数中使用。如果要想使用，直接去掉var，改成全局变量。具体的看一下，变量的作用域就行。

0 回复有任何疑惑可以回复我~

收起回答

于梦中提问者

非常感谢！

2016-04-20 回复有任何疑惑可以回复我~

我有一只猫
2016-04-20

    var oDrag = document.getElementById('draggable');
    var isDraging = false;
    // var startX = 0;
    // var startY = 0;
    oDrag.addEventListener('mousedown',function(e){
        //鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动） 
        startX=e.pageX-oDrag.offsetLeft;
        startY=e.pageY-oDrag.offsetTop;
        isDraging=true;
        
    })
    document.onmouseup = function(e){
        //鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
        isDraging=false;
       
    }
    document.onmousemove = function(e) {
        //鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）
        var mouseX=e.pageX;
        var mouseY=e.pageY;
        
        var moveX=0;
        var moveY=0;
        if(isDraging===true){
            moveX=mouseX-startX;   //这个地方使用了
            moveY=mouseY-startY;
            
        moveX=Math.max(0,Math.min(document.documentElement.clientWidth-oDrag.offsetWidth,moveX));
        moveY=Math.max(0,Math.min(document.documentElement.clientHeight-oDrag.offsetHeight,moveY));
        
        oDrag.style.left=moveX+"px";
        oDrag.style.top=moveY+"px";
            
        }

0 回复有任何疑惑可以回复我~

收起回答