亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

javascript 讀出對象的位置并通過 onclick 顯示,或保存在變量中

javascript 讀出對象的位置并通過 onclick 顯示,或保存在變量中

海綿寶寶撒 2024-01-11 17:39:51
我正在嘗試讀出對象的 x 和 y 位置。理想情況下,應該有一個“onclick”按鈕,可以單擊該按鈕,然后讀出并顯示位置。這是代碼和網站: https: //www.unisg.bplaced.net/JS/dragdrop3.html我想做的事情是讀出位置并將其保存在變量中甚至在警報框中顯示它們也會很棒。但是,我最終需要將它們保存在我的調查程序中。
查看完整描述

1 回答

?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

只需指定 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 代碼將為您提供所需的職位。


查看完整回答
反對 回復 2024-01-11
  • 1 回答
  • 0 關注
  • 184 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號