js实现拖拽的解析（3）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fanfanzk1314/article/details/79412067

<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top: 0;"></div>

js实现：

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

    var disx, disy;
    div.onmousedown = function (e) {
        disx = e.pageX - parseInt(div.style.left);
        disy = e.pageY - parseInt(div.style.top);

        document.onmousemove = function (e) {
            var e = e || window.event;
            console.log(e.pageX + " " + e.pageY)
            div.style.left = e.pageX - disx + "px";
            div.style.top = e.pageY - disy + "px";

        }
        document.onmouseup = function () {
            div.onmousedown = null;

        }
    }

使用函数实现：

function drag(elem) {
        var disx, disy;

        addEvent(elem, 'mousedown', function (e) {
            var event = e || window.event;
            disx = event.clientX - parseInt(getStyle(elem, 'left'));
            disy = event.clientY - parseInt(getStyle(elem, 'top'));
            addEvent(document, 'mousemove', mouseMove);
            addEvent(document, 'mousemoup', mouseUp);

            stopBubble(event);
            cancelHandle(event);

            function cancelHandle(e) {
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }


            }

            function stopBubble(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;

                }
            }

            function mouseMove(e) {
                var event = e || window.event;
                elem.style.left = event.clientX - disx + "px";
                elem.style.top = event.clientY - disy + "px";
            }

            function mouseUp(e) {
                var event = e || window.event;
                removeEvent(document, 'mousemove', mouseMove);
                removeEvent(document, 'mousemoup', mouseUp);
            }


        })

    }