码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript DOM 鼠标拖拽

时间:2020-09-23 23:21:35      阅读:38      评论:0      收藏:0      [点我收藏+]

标签:iter   基于   define   etc   set   select   lock   params   tst   

在前端页面交互中,鼠标拖拽是一个体验良好的功能,实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装
 

鼠标行为坐标系

 

 

鼠标行为触发事件时,事件对象上会有一些属性提供鼠标的位置信息

属性功能兼容性
clientX/Y 鼠标相对可视区域的坐标 /
x/y 与 clientX/Y 功能相同 firefox 低版本不支持
pageX/Y 鼠标相对整个文档的坐标 兼容 IE9 及以上
layerX/Y 与 pageX/Y 功能相同 IE10 及以下同 clientX/Y
screenX/Y 鼠标位置相对屏幕坐标 /
offsetX/Y 鼠标位置相对块元素的坐标(包含边框) safari 不包含边框

 

 

获取鼠标相对整个文档的坐标:pageX/Y 兼容性差,需要进行封装

鼠标相对整个文档的坐标 = 鼠标相对可视区域的坐标 + 滚动条滚动距离 - 文档偏移

document.documentElement.clientTop 获取文档偏移,在 IE 一些版本中为 undefined

function pagePos(ev) {
    var sTop = getScrollOffset().top,
        sLeft = getScrollOffset().left,
        cTop = document.documentElement.clientTop || 0,
        cLeft = document.documentElement.clientLeft || 0;
    return {
        X: ev.clientX + sLeft - cLeft,
        Y: ev.clientY + sTop - cTop
    }
}
// 封装的函数:获取滚动条滚动距离
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }
    else return {
        top:document.body.scrollTop || document.documentElement.scrollTop,
        left:document.body.scrollLeft || document.documentElement.scrollLeft
    }
}
 

拖拽函数封装

 

 

拖拽效果基于鼠标事件:mousedown、mousemove、mouseup

分别为鼠标按下、鼠标移动、鼠标松开

 

 

原理:鼠标按下时,添加鼠标移动、鼠标松开的事件处理函数,鼠标移动时获取鼠标坐标,改变元素样式,鼠标松开时清除鼠标移动和鼠标松开的事件处理函数

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <style type="text/css">
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box = document.getElementsByTagName(‘div‘)[0];

    box.onmousedown = function (ev) {
        var ev = ev || window.event,
            x = pagePos(ev).X - parseInt(getStyles(box)[‘left‘]),
            y = pagePos(ev).Y - parseInt(getStyles(box)[‘top‘]);

        document.onmousemove = function (ev) {
            var ev = ev || window.event,
                mPos = pagePos(ev);
            box.style.left = mPos.X - x + ‘px‘;
            box.style.top = mPos.Y - y + ‘px‘;
        }
        document.onmouseup = function () {
            this.onmousemove = null;
            this.onmouseup = null;
        }
    }

    // 封装的函数:获取鼠标相对整个文档的坐标
    function pagePos(ev) {
        var sTop = getScrollOffset().top,
            sLeft = getScrollOffset().left,
            cTop = document.documentElement.clientTop || 0,
            cLeft = document.documentElement.clientLeft || 0;
        return {
            X: ev.clientX + sLeft - cLeft,
            Y: ev.clientY + sTop - cTop
        }
    }
	// 封装的函数:获取滚动条滚动距离
    function getScrollOffset() {
        if (window.pageXOffset) {
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        } else return {
            top: document.body.scrollTop || document.documentElement.scrollTop,
            left: document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }

    // 封装的函数:获取元素样式的类数组
    function getStyles(elem) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(elem, null);
        } else return elem.currentStyle;
    }
</script>
</body>
</html>

 

广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

封装拖拽函数

var box = document.getElementsByTagName(‘div‘)[0];
elemDrag(box);

// 封装的拖拽函数
function elemDrag(elem) {
    var x,
        y;
    addEvent(elem, ‘mousedown‘, function (ev) {
        var ev = ev || window.event;
        x = pagePos(ev).X - parseInt(getStyles(elem)[‘left‘]);
        y = pagePos(ev).Y - parseInt(getStyles(elem)[‘top‘]);
        addEvent(document, ‘mousemove‘, mousemove);
        addEvent(document, ‘mouseup‘, mouseup);
        cancelBubble(ev);
        preventDefaultEvent(ev);
    });

    function mousemove(ev) {
        var ev = ev || window.event;
        elem.style.left = pagePos(ev).X - x + ‘px‘;
        elem.style.top = pagePos(ev).Y - y + ‘px‘;
    }

    function mouseup(ev) {
        var ev = ev || window.event;
        removeEvent(document, ‘mousemove‘, mousemove);
        removeEvent(document, ‘mouseup‘, mouseup);
    }

}
// 绑定事件处理函数
function addEvent(elem, type, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(type, fn);
    } else if (elem.attachEvent) {
        elem.attachEvent(‘on‘ + type, function (ev) {
            fn.call(elem, ev); // call 兼容性比 bind 好
        });
    } else {
        elem[‘on‘ + type] = fn;
    }
}
// 解绑事件处理函数
function removeEvent(elem, type, fn) {
    if (elem.addEventListener) {
        elem.removeEventListener(type, fn);
    } else if (elem.attachEvent) {
        elem.detachEvent(‘on‘ + type, fn);
    } else {
        elem[‘on‘ + type] = null;
    }
}
// 获取鼠标在整个文档中的坐标
function pagePos(ev) {
    var sTop = getScrollOffset().top,
        sLeft = getScrollOffset().left,
        cTop = document.documentElement.clientTop || 0,
        cLeft = document.documentElement.clientLeft || 0;
    return {
        X: ev.clientX + sLeft - cLeft,
        Y: ev.clientY + sTop - cTop
    }
}
// 获取滚动条滚动距离
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    } else return {
        top: document.body.scrollTop || document.documentElement.scrollTop,
        left: document.body.scrollLeft || document.documentElement.scrollLeft
    }
}
// 获取元素样式的类数组
function getStyles(elem) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null);
    } else return elem.currentStyle;
}
// 阻止冒泡
function cancelBubble(ev) {
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else ev.cancelBubble = true; // 兼容 IE8 及以下
}
// 阻止默认事件
function preventDefaultEvent(ev) {
    if (ev.preventDefault) {
        ev.preventDefault();
    } else ev.returnValue = false; // 兼容 IE8 及以下
}   

JavaScript DOM 鼠标拖拽

标签:iter   基于   define   etc   set   select   lock   params   tst   

原文地址:https://www.cnblogs.com/cmqj/p/13700072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!