对象的JavaScript读取位置，并通过onclick显示，或保存在变量中

问题描述 投票：0回答：1

我正在尝试读取对象的x和y位置。理想情况下，将有一个可以单击的“ onclick”按钮，然后读取并显示该位置。

这里是代码，这里是网站：https://www.unisg.bplaced.net/JS/dragdrop3.html

我想做的事情是

  • 读取位置并将其保存在变量中
  • 即使在警报框中显示它们也很棒。但是，我最终需要将它们保存在我的调查程序中。

这是到目前为止的网站代码

<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));
        }
    
    });

function myFunction1() {
    alert("The position is" + position.left);
}

    </script>

<button onclick="myFunction1()">Click me</button>

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
javascript html button onclick
1个回答
0
投票

只需指定dragMe id的属性之一，因为您已经在元素的上方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代码将为您提供所需的位置。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.