Saving the position of a draggable div in rails

Question

After making a div draggable, i would like, when the div is dropped, to pass to the controller the div's position so that it can be saved on to the database.

My first idea would be to have an hidden form within the div, with 2 text fields (one for X and one for Y) which is kept updated via javascript and submitted on drop.

However this sounds like a bit of a hack and is not an elegant solution. Has anybody encountered this before?

Thank you.

Answer 1

You could simply use an AJAX request that would post the X and Y values to your Rails application in the background. No need to store the positions in your HTML.

If you use jQuery you could use something like this:

// Include this in an onDrop event handler:
element = ... // dropped div
url = "http://example.com/.../save_div_position/";
data = $(element).position();
success_callback = function(data, textStatus) {
    // alert that new position is saved
};
$.post(url, data, success_callback, "json");

Answer 2

I was also going to say storing the positions in text fields is a bad idea. jQuery UI provides draggable and is easily used. The example below will send a ajax request whenever the element is dropped.

$('#draggable_element').draggable({  
    stop: function(event, ui) {   
        $.post("http://example.com/some_action",
            { top: ui.position["top"], left: ui.position["left"] },
            function() {  
                // callback stuff
            }
        );
    }  
});