Как получить позицию x и y из jQuery ui draggable?

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

В stop обратного вызова, вы можете использовать ui.helper для доступа к перетаскивается элемент. Затем используйте offset на него, как это было предложено Brad:

$("#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) (Edit: там можно найти решение в another question)

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

Answer 2

Вы можете использовать jQuery's .offset().

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

Вы можете получить верхнюю и ЛЕФ:

$('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. 
    } 
})