原生js 实现节点拖拽

最新推荐文章于 2022-09-16 18:56:14 发布

瞬间空白sky

最新推荐文章于 2022-09-16 18:56:14 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/apple_01150525/article/details/52919014

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #drug {
            width: 100px;
            height: 100px;
            background-color: #e4393c;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="drug"></div>
<script>
    var drugs = function (element, callback) {
        callback = callback || function () {
                }
        var param = {
            top: 0,
            left: 0,
            cX: 0,
            cY: 0,
            pause: false,
        };

        function getCss(ele, key) {
            return ele.currentStyle ? ele.currentStyle[key] : document.defaultView.getComputedStyle(ele, null)[key];
        }

        var lefts = getCss(element, "left");
        var tops = getCss(element, "top");
        param.left = lefts !== "auto" ? lefts : 0;
        param.top = tops !== "auto" ? tops : 0;
        element.onmousedown = function (event) {
          //  console.log(1);
            param.pause = true;
            event = event || window.event;
            param.cX = event.clientX;
            param.cY = event.clientY;
        };
        document.onmousemove = function (event) {

            event = event || window.event;
            if (param.pause) {
            //    console.log(2);
                var nowX = event.clientX,
                        nowY = event.clientY;
                var disX = nowX - param.cX,
                        disY = nowY - param.cY;
                element.style.left = parseInt(param.left) + disX + "px";
                element.style.top = parseInt(param.top) + disY + "px";
            }
        };
        document.onmouseup = function () {
            //console.log(3);
            param.pause = false;
            var lefts = getCss(element, "left"),
                    tops = getCss(element, "top");
            param.left = lefts !== "auto" ? lefts : 0;
            param.top = tops !== "auto" ? tops : 0;
        }
    }(document.getElementById("drug"));
</script>
</body>
</html>

瞬间空白sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js 实现节点拖拽

#drug { width: 100px; height: 100px; background-color: #e4393c; position: absolute; } var drugs = function (element, callback) {
复制链接

扫一扫