Store Jquery Draggable Position

Question

Как получить координаты X, Y перетаскиваемого объекта JQueryUI, когда он отбрасывается, и отправить их во что-то (сервлет Java) с помощью AJAX?

Я пытаюсь сохранить местоположениеВ базе данных у меня есть обработчик, я неплохой бэкэнд, но я отстой с JavaScript!

Answer 1

Это включает в себя только тот вызов AJAX, который вы можете использовать.

$(".draggable").draggable({
    stop: function(event, ui) {
        var x = ui.position.left;
        var y = ui.position.top;

        $.post("servlet", {
            x: x,
            y: y
        }.success(function() {
            console.log(event+" "+ui+" "+ui.position);
        }.error(function() {
            console.log("FAILED: "+event+" "+ui+" "+ui.position);
        });
    }
});

Answer 2

Помогает ли это.Вы можете получить необходимые данные из аргументов функции обратного вызова

$(document).ready(function(){

$( "#drag_area" ).draggable({
    stop: function(event, ui){
        console.log(event);
        console.log(ui);
        console.log(ui.position);   
        var left = ui.position.left;
        var top = ui.position.top;  
    }
});
});

Из ui.position вы можете получить верхнюю и левую позиции объекта после остановки перетаскивания

Answer 3

если вы посмотрите документацию по методу jQuery ui dragggable в разделе событий, вы увидите метод stop.В этом методе вы можете просмотреть опцию оси перетаскиваемых элементов, а затем выполнить ajax-вызов для обновления базы данных.

$( ".selector" ).draggable({
   stop: function(event, ui) {
      //edit for my mistake
       //var axis = $( ".selector" ).draggable( "option", "axis" );
       var axis = ui.position;
   }
});