js 拖曳 div 并获取基于父元素的相对坐标 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8>
    <title>获取相对坐标</title>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        .container {
            width: 80vw;
            height: 95vh;
            position: absolute;
            top: 0px;
            left: 20vw;
            overflow: auto;
            border: 1px solid #000;
            margin: 0px;
            padding: 5px;
        }

        .main {
            margin: 0 auto;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .main img {
            margin: 0 auto;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -1;
            display: block;
            white-space: nowrap;
        }

        .main div {
            position: absolute;
            background: #fa0;
            width: 100px;
            padding: 10px;
            height: 80px;
            border: 1px solid #999;
            cursor: move;
            z-index: 9999;
        }

        input {
            width: 100%;
        }

        .main div span {
            display: block;
            font-size: 28px;
            color: #fff;
            font-weight: bold;
            font-family: Arial
        }
    </style>
    <script type="text/javascript">
        var a;
        document.onselectstart = document.ondragstart = document.oncontextmenu = function () {
            return false;
        };
        document.onmouseup = function () {
            if (!a)
                return;
            document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            a = "";
        };
        document.onmousemove = function (d) {
            if (!a)
                return;
            d = d || window.event;
            var x = d.clientX - b;
            var y = d.clientY - c;
            var p = a.parentElement;
            x = x < p.offsetLeft ? p.offsetLeft : x;
            x = x > p.offsetLeft + p.offsetWidth - a.offsetWidth ? p.offsetLeft + p.offsetWidth - a.offsetWidth : x;
            y = y < p.offsetTop ? p.offsetTop : y;
            y = y > p.offsetTop + p.offsetHeight - a.offsetHeight ? p.offsetTop + p.offsetHeight - a.offsetHeight : y;
            a.style.left = x + "px";
            a.style.top = y + "px";
            a.children[1].value = y - p.offsetTop + 'px';
            a.children[2].value = x - p.offsetLeft + 'px';
        };

        function move(o, e) {
            a = o;
            var div = o;
            var dp = o.parentElement;
            document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
            var oleft = o.style.left;
            if (oleft == 0) {
                o.style.top = dp.offsetTop + "px";
                o.style.left = dp.offsetLeft + "px";
            }

            b = e.clientX - parseInt(a.style.left);
            c = e.clientY - parseInt(a.style.top);
            reOrderzIndex(o);
        }

        // 重新调整当期父元素里面的子元素的zIndex
        function reOrderzIndex(o) {
            var op = o.parentElement;
            if (!!op.child) {
                op.child.style.zIndex = 0;
            }
            o.style.zIndex = 1;
            op.child = o;
        }

        //获取元素宽高
        function getSize(id) {
            var o = document.getElementById(id);
            var w = o.offsetWidth;
            var h = o.offsetHeight;
            console.log("图像宽高：", w + ";" + h);
            return {w: w, h: h}
        }

        window.onload = function () {
            //手动用背景图片撑开画布
            var size = getSize("bg");
            var board = document.getElementById("board");
            board.style.width = size.w + "px";
            board.style.height = size.h + "px";
        }
    </script>
</head>
<body>
<div class="container">
    <div class="main" id="board">
        <img src="bk.jpg" id="bg"/>
        <div onmousedown="move(this,event)"><span>1</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
        <div onmousedown="move(this,event)"><span>2</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
        <div onmousedown="move(this,event)"><span>3</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
        <div onmousedown="move(this,event)"><span>4</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
        <div onmousedown="move(this,event)"><span>5</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
        <div onmousedown="move(this,event)"><span>6</span><input name="" type="text" value="拖动我自动获取 top 值：000"><input
                name="" type="text" value="拖动我自动获取 left 值：000"></div>
    </div>
</div>
</body>
</html>

 

posted @ 2022-02-16 17:43  牛有肉  阅读(759)  评论(0)  编辑  收藏  举报