<!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>