CODEWITHSUNDEEP
javascriptjqueryajaxdraggablejquery-ui-draggable
James Bennet
James Bennet

Reputation: 603

Store Jquery Draggable Position

How can I get the X,Y co-ords of a JQueryUI draggable object, when it is dropped, and POST them to something (a java servlet) using AJAX?

Im trying to store the location of it in a database, ive got the handler to do that done, Im an okay backend guy, but I suck with JavaScript!

Upvotes: 1

Views: 1077

Answers (3)

Kris Schouw
Kris Schouw

Reputation: 352

This just includes that AJAX call you might be able to use.

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

Upvotes: 3

xanderer
xanderer

Reputation: 438

if you look in the jQuery ui draggable method documentation under events, you'll see the stop method. In this method you can look at the draggable elements axis option and then do your ajax call to update the database.

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

Upvotes: 0

DG3
DG3

Reputation: 5298

Does this help. You can get the required data from the callback function arguments

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

From ui.position you can get top and left position of the object after the dragging has stopped

Upvotes: 1

Related Questions