web-dev-qa-db-ja.com

ドラッグ可能なオブジェクトの位置を取得する方法

JQueryを使用して、ドラッグ可能なオブジェクトのxとyを取得しようとしています。

シナリオは、オブジェクトを別のオブジェクトにドラッグアンドドロップし、ドラッグアンドドロップオブジェクトの位置を取得することです。

編集：オブジェクトの位置を取得できるようになりましたが、さらに必要です：

ここに私が試したものがあります：

<script>
$(function() {
    $('#draggable').draggable({
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).text('x: ' + xPos + 'y: ' + yPos);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});
</script>

ドラッグ可能なオブジェクトの位置を取得できるようになりましたが、サイズ変更可能で、x,yドラッグ可能の、サイズも必要です。

jqueryjquery-uidrag-and-dropposition
29
Pabuc

次のいずれかを試すことができます。

_$(this).position()
_

または

_$(this).offset()
_

.position()メソッドを使用すると、オフセットの親に対する要素の現在の位置を取得できます。これとは対照的に、.offset()は、ドキュメントに対する現在の位置を取得します。

http://api.jquery.com/position/ から

13
user603881

.resizable（）およびstopイベントで幅の出力を取得できます。これを追加してみてください：

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });
0
Colton Gwinn