ansaurus

Question

Jquery UI sortable, store location and size?

Answer 1

+1 A:

Make an Ajax call in the draggable callback function.

This is because from the callback you can get the current co-ordinates, and you will be able to save them to the database.

Here's an example :

 $("#draggable").draggable({
                connectToSortable: '#sortable',
                helper: 'clone',
                revert: 'invalid',
                stop : function (event, ui) {
                    //callback function
                    $.post("savepos.php", 
                        { 
                            //parameters to send to your ajax page
                            top: ui.position.top, 
                            left : ui.position.left 
                        }  
                    );
                }
            });

Andreas Grech 2009-09-05 22:34:01

Here's an article talking about combining php and ajax : http://www.ibm.com/developerworks/opensource/library/os-php-jquery-ajax/index.html

Andreas Grech 2009-09-05 22:44:20

Hi thanks, from the php script what will I be 'getting', will I use the GET Function? e.g. GET['top'] etc, is that how they are sent? Thanks

Elliott 2009-09-05 22:46:36

from the php, take the variables like such : $_POST['top']

Andreas Grech 2009-09-05 23:24:45

Answer 2

A:

sortable has convenience methods for just this scenario called serialize (see the docs). serialize produces a query string that can be used in an AJAX request; you might use it something like this:

$('#sortable').sortable(
{
    stop: function(event, ui)
    {
        $.post('save.php', $('#sortable').serialize());
    }
});

Then it's just a question of implementing save.php to support this process. The example query string given in the docs (foo[]=1&foo[]=5&foo[]=2) would produce a $_POST array with:

array(1) {
  ["foo"]=>
  array(3) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "5"
    [2]=>
    string(1) "2"
  }
}

Will Vousden 2010-01-02 10:55:43

ansaurus

tags:

views:

answers:

Jquery UI sortable, store location and size?

related questions