Mouse action coordinate system

  1. When the mouse action triggers an event, the event object has properties that provide information about the mouse’s position

    attribute function compatibility
    clientX/Y Coordinates of the mouse relative to the viewable area /
    x/y Same function as clientX/Y Firefox earlier versions do not support this
    pageX/Y Mouse coordinates relative to the entire document Compatible with Internet Explorer 9 or later
    layerX/Y Same function as pageX/Y IE10 and below are the same as clientX/Y
    screenX/Y Mouse position relative to screen coordinates /
    offsetX/Y Coordinates of mouse position relative to block element (including border) Safari does not include borders

  2. Gets the mouse coordinates relative to the entire document

    PageX /Y compatibility is poor and needs to be encapsulated

    Mouse coordinates relative to the entire document = mouse coordinates relative to the visible area + scroll bar scrolling distance – document offset

    Note: the document. The documentElement. ClientTop obtaining document offset, in some versions of IE is 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
    }
}
// Encapsulates the function: get the scroll bar scroll distance
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
    }
}
Copy the code

Drag function encapsulation

  1. Drag and drop effects are based on mouse events: Mousedown, Mousemove, mouseup

    They are mouse press down, mouse move and mouse release

  2. The principle of

    Add event handlers for mouse movement and mouse release when the mouse is pressed down

    Gets mouse coordinates as the mouse moves, changing the element style

    Clears mouse movement and mouse release event handlers when the mouse is released

    <! doctypehtml>
<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; }}// Encapsulate functions: Get the coordinates of the mouse relative to the entire document
    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
        }
    }
	// Encapsulates the function: get the scroll bar scroll distance
    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
        }
    }

    // Encapsulate functions: Get an array of class elements
    function getStyles(elem) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(elem, null);
        } else return elem.currentStyle;
    }
</script>
</body>
</html>
Copy the code

  3. Encapsulate the drag function

    Start by encapsulating several utility functions, such as binding event handlers, getting the scrollbar scroll distance, getting element styles, preventing bubbling, and default events

    // Bind event handlers
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 compatibility is better than bind
        });
    } else {
        elem['on'+ type] = fn; }}// Unbind the event handler
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; }}// Get the coordinates of the mouse in the entire document
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
    }
}
// Get the scrolling distance of the scroll bar
function getScrollOffset(a) {
    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
    }
}
// Get the element style class array
function getStyles(elem) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null);
    } else return elem.currentStyle;
}
// Prevent bubbling
function cancelBubble(ev) {
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else ev.cancelBubble = true; // Compatible with IE8 and below
}
// Block the default event
function preventDefaultEvent(ev) {
    if (ev.preventDefault) {
        ev.preventDefault();
    } else ev.returnValue = false; // Compatible with IE8 and below
}  
Copy the code

    Press the mouse mousedown event to get the mouse position from the event object, noting that the size of the element is subtracted

    The move mouse mousemove event is triggered to change the inline style of the target element to move the position

    Release the mouseup event and unbind the mousedown and Mousemove events

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

// Encapsulate the drag function
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); }}Copy the code