原生js 实现节点拖拽

来源：互联网发布：京东销售数据分析编辑：程序博客网时间：2024/06/05 00:38
<!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>
0 0