jQueryからドラッグ可能な位置xとyを取得するにはどうすればよいですか？

Question

はここで例http://jsfiddle.net/naqbq/

はどのようにして再配置画像の後xとyの現在の位置をつかむのですか？

<input type="hidden" name="source_x" id="source_x" /> 
<input type="hidden" name="source_y" id="source_y" /> 

Answer 1

、あなたはドラッグされた要素にアクセスするためにui.helperを使用することができます。ブラッドが示唆したように続いて、その上にoffsetを使用します。

$("#image").draggable({ 
    stop:function(event,ui) { 
     var wrapper = $("#wrapper").offset(); 
     var borderLeft = parseInt($("#wrapper").css("border-left-width"),10); 
     var borderTop = parseInt($("#wrapper").css("border-top-width"),10); 
     var pos = ui.helper.offset(); 
     $("#source_x").val(pos.left - wrapper.left - borderLeft); 
     $("#source_y").val(pos.top - wrapper.top - borderTop); 
     alert($("#source_x").val() + "," + $("#source_y").val()); 
    } 
});​ 

その後、それはあなたのラッパーにそれを調整するだけです - 減算そのオフセットとその境界線の幅 - とあなたの入力のvalに設定します。 （国境をハードコーディングして申し訳ありませんが、私は cssを使用して、それを取り出すことができませんでした） （編集：！そこにそれはanother questionで解決策を発見された）

あなたが停止に建て使用する必要があります

http://jsfiddle.net/mgibsonbr/naqbq/4/

Answer 2

jQueryの.offset()を使用できます。 stopコールバックで

http://api.jquery.com/offset/

alert($('#image').offset().top); 
alert($('#image').offset().left); 

Answer 3

あなたがトップを得ることができ

$("#image").draggable({ 
    stop: function() { 
     // check for positioning here using .css or .offset 
    } 
}); 

Answer 4

、およびLEF：イベント

$('selector').draggable({ 
    drag: function(event, ui) { 
    ui.position.top; // .left 
    // or 
    $('selector').position().top; // current position of an element relative to the offset parent 
    $('selector').offset(); // retrieves the current position relative to the document. 
    } 
})