перетащите сохранить положение div / img на странице

Question

В настоящее время я использую такой метод, который позволяет перетаскивать элементы div / imgs внутри элемента div (на основе периметра)

    <script>
$(function() {
    $("#video").draggable({ containment: "#container2", scroll: false });
    $("#umbrella").draggable({ containment: "#container2", scroll: false });
            $("#plane").draggable({ containment: "#container2", scroll: false });
            $("#peace").draggable({ containment: "#container2", scroll: false });
            $("#thought").draggable({ containment: "#container2", scroll: false });
    $("#thought2").draggable({ containment: "#container2", scroll: false });
    $("#beachball").draggable({ containment: "#container2", scroll: false });
});
</script>

Я пытаюсь сохранить перетаскивание DIV точно в том месте, где он находится внутри разделителя div, и отправить его в таблицу MYSQL, которая сообщит браузеру, где он должен быть размещен в будущем (или после сохранения)

Я просто не уверен, как получить точные координаты через JS или JQUERY

Любая помощь будет оценена!

Заранее спасибо

Andrew

Answer 1

Решение jQuery:

var divPos = $('#div').position();

Теперь вы можете использовать

divPos.left

divPos.right

divPos.top

и

divPos.bottom

, чтобы получить точные координаты.

Для получения дополнительной информации о .position (), смотрите здесь: http://api.jquery.com/position/

Answer 2

Попробуйте:

$( "#video" ).draggable({
           stop : function () {
               alert("X=" + $(this).position().left + ", Y=" + $(this).position().top);
           } 
});

Демо: http://jsfiddle.net/codef0rmer/FXwME/

Более подробную информацию можно найти здесь: http://jqueryui.com/demos/draggable/#event-stop