鼠标拖拽特效

拖拽原理分析

事件一，鼠标在可拖拽区域按下时

计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动

1
2
3
4
5
6
oDrag.addEventListener('mousedown', function(e) {
    var e = e || window.event;
    mouseOffsetX = e.pageX - oDrag.offsetLeft;
    mouseOffsetY = e.pageY - oDrag.offsetTop;
    isDraging = true;
})

事件二，鼠标在可拖动区域按下并开始移动时

检测，元素是否标记为移动,浮层跟随鼠标移动

1
2
3
4
5
6
7
8
9
10
11
12
13
document.onmousemove = function(e) {
    var e = e || window.event;
    var mouseX = e.pageX; //鼠标当前在屏幕的位置
    var mouseY = e.pageY;
    var moveX = 0; //浮层元素的新位置
    var moveY = 0;
    if (isDraging === true) {
        moveX = mouseX - mouseOffsetX;
        moveY = mouseY - mouseOffsetY;
        oDrag.style.left = moveX + 'px';
        oDrag.style.top = moveY + 'px';
    }
};

拖拽区域的宽度和高度限制

上段程序未进行可移动区域的限制，这样拖拽图层可能脱离屏幕，出现滚轮
通过clientWidth,clientHeight设置pageWidth和pageHeight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.onmousemove = function(e) {
    var e = e || window.event;
    var mouseX = e.pageX; //鼠标当前在屏幕的位置
    var mouseY = e.pageY;
    var moveX = 0; //浮层元素的新位置
    var moveY = 0;
    if (isDraging === true) {
        moveX = mouseX - mouseOffsetX;
        moveY = mouseY - mouseOffsetY;
        //宽度限制，moveX>0,并且moveX<(页面最大宽度-dialog宽度)
        //高度限制，moveYou>0,并且moveY<(页面最大高度-dialog高度)
        var pageWidth = document.documentElement.clientWidth;
        var pageHeight = document.documentElement.clientHeight;
        var dialogWidth = oDrag.offsetWidth;
        var dialogHeight = oDrag.offsetHeight;
        var maxX = pageWidth - dialogWidth;
        var maxY = pageHeight - dialogHeight;
        moveX = Math.min(maxX, Math.max(0, moveX)); //保证moveX不小于0
        moveY = Math.min(maxY, Math.max(0, moveY)); //保证moveY不小于0
        oDrag.style.left = moveX + 'px';
        oDrag.style.top = moveY + 'px';
    }
};

事件三，鼠标松开时

标记元素为不可拖动

1
2
3
document.onmouseup = function(e) {
    isDraging = false;
}

拖拽特性——重点函数总结

名称 说明
document.getElementById(ID) 根据传入的ID获得元素element对象
Element.addEventListener(TYPE,FUNCTION) 为元素对象设置事件侦听处理
document.onmouseup=function(e){} 鼠标松开时触发
document.onmousemove=function(e){} 鼠标移动时触发

详细图片展示和demo

详细图片展示

拖拽图片

demo

拖拽效果在线演示
完整登陆浮层拖拽效果