JS实现对节点的拖拽

转自他人博客，忘记地址了 ^_^
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>js实现对节点拖拽</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #drag {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="drag"></div>
    <script type="text/javascript">
        var Drags = function (element, callback) {
            callback = callback || function () {};
            var params = {
                top: 0,
                left: 0,
                currentX: 0,
                currentY: 0,
                flag: false
            };

            function getCss(element, key) {
                return element.currentStyle ? element.currentStyle[key] : document.defaultView.getComputedStyle(
                    element, null)[key];
                // ie用currentStyle
            }
            var lefts = getCss(element, "left"),
                tops = getCss(element, "top");
            params.left = lefts !== "auto" ? lefts : 0;
            params.top = tops !== "auto" ? tops : 0;
            element.onmousedown = function (event) {
                params.flag = true;
                event = event || window.event; // ie用后面
                params.currentX = event.clientX;
                params.currentY = event.clientY;
            };
            document.onmousemove = function (event) {
                event = event || window.event;
                if (params.flag) {
                    // 现在位置
                    var nowX = event.clientX,
                        nowY = event.clientY,
                        // 需要移动的距离
                        disX = nowX - params.currentX,
                        disY = nowY - params.currentY;
                    element.style.left = parseInt(params.left) + disX + "px";
                    element.style.top = parseInt(params.top) + disY + "px";
                }
            };
            document.onmouseup = function () {
                params.flag = false;
                var lefts = getCss(element, "left"),
                    tops = getCss(element, "top");
                params.left = lefts !== "auto" ? lefts : 0;
                params.top = tops !== "auto" ? tops : 0;
            }
        }(document.getElementById('drag'));
    </script>
</body>

</html>
JS实现对节点的拖拽

猜你喜欢
