javascript 读出对象的位置并通过 onclick 显示，或保存在变量中
我正在尝试读出对象的 x 和 y 位置。理想情况下，应该有一个“onclick”按钮，可以单击该按钮，然后读出并显示位置。
这是代码和网站： https: //www.unisg.bplaced.net/JS/dragdrop3.html
我想做的事情是
读出位置并将其保存在变量中
甚至在警报框中显示它们也会很棒。但是，我最终需要将它们保存在我的调查程序中。
海绵宝宝撒浏览 122回答 1
1回答
-
千万里不及你
只需指定 id 的属性之一dragMe，因为您已在上面的 css 中将位置指定为绝对位置，并在元素的内联 css 中将位置指定为相对位置。并获取位置px添加代码为<html><head> <style> #container { width: 100%; height: 400px; background-image: url('http://www.unisg.bplaced.net/park2.png'); background-repeat: no-repeat; background-size: contain; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; touch-action: none; } #dragMe { width: 100px; height: 300px; background-image: url('http://www.unisg.bplaced.net/silhoutte3.png'); background-size: 100px 300px; background-repeat: no-repeat; border-radius: 2em 2em 2em 2em; position: absolute; top: 10%; left: 20%; } #dropMe { width: 12em; height: 12em; padding: 0.5em; margin: 0 auto; } </style> <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }.as-console-row + .as-console-row > * { border: 1px solid #ccc; }.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }.as-console-error:before { content: 'Error: '; color: #f00; }.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }.as-console-info:before { content: 'Info: '; color: #00f; }.as-console-warning:before { content: 'Warning: '; color: #e90 }@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style></head><body> <script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="container"><div id="dragMe" class="ui-draggable ui-draggable-handle" style="position: relative; "><p>You</p></div><div id="dropMe"></div> <script type="text/javascript"> $('#dragMe').draggable( { containment: $('body'), drag: function(){ var position = $(this).position(); var xPos = position.left; var yPos = position.top; $('#positionX').text('positionX: ' + xPos); $('#positionY').text('positionY: ' + yPos); }, accept: '#dragMe', over : function(){ $(this).animate({'border-width' : '5px', 'border-color' : '#0f0' }, 500); $('#dragThis').draggable('option','containment',$(this)); } });$(document).ready(function(){ $("button").click(function(){ var x = $("#dragMe").position(); alert("Top position: " + x.top + " Left position: " + x.left); });}); </script><button>Click me</button><div class="as-console-wrapper"><div class="as-console"></div></div></body></html>这里的 jQuery 代码将为您提供所需的职位。
随时随地看视频慕课网APP
相关分类
Html5