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

Вот пример http://jsfiddle.net/naqbq/

Как захватить текущую позицию для x и y после повторного позиционирования изображения?

4 ответа

В обратном вызове stop вы можете использовать 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) (Edit: там он нашел решение в другом вопросе)

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


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

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

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


Вы можете получить верхнюю часть и лев:

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


Вы должны использовать встроенное событие остановки:

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

licensed under cc by-sa 3.0 with attribution.