Question

Hoping that using something like this demo it is possible to drag items within and between two columns, and update their order either live or with a “save” button to MySQL. Point being that you can make changes and return to the page later to view or update your ordering.

http://pilotmade.com/examples/draggable/

Doing it for just one column is fine, but when I try to pass the order of both columns, the issue seems to be passing multiple serialized arrays with jQuery to a PHP/MySQL update script.

Any insight would be much appreciated.

If you look below, I want to pass say…

sortable1
entry_1 => 0
entry_5 => 1

sortable2
entry_3 => 0
entry_2 => 1
entry_4 => 2

EDIT: This ended up doing the trick

HTML

<ol id="sortable1"><li id="entry_####">blah</li></ol>

jQuery

<script type="text/javascript">
$(function() 
{
    $("#sortable1, #sortable2").sortable(
    {
        connectWith: '.connectedSortable',
        update : function () 
        { 
            $.ajax(
            {
                type: "POST",
                url: "phpscript",
                data: 
                {
                    sort1:$("#sortable1").sortable('serialize'),
                    sort2:$("#sortable2").sortable('serialize')
                },
                success: function(html)
                {
                    $('.success').fadeIn(500);
                    $('.success').fadeOut(500);
                }
            });
        } 
    }).disableSelection();
});

This is the PHP query

parse_str($_REQUEST['sort1'], $sort1);
foreach($sort1['entry'] as $key=>$value)
{
do stuff
}

Answer 1

what I would do is split them up

   data    :
    {
      sort1:$('#sortable1').sortable('serialize'),
      sort2:$('#sortable2').sortable('serialize')
    }

then when you post you can get the request and set them as needed, I hope that makes sense

so what I do is this

parse_str($_REQUEST['sort1'],$sort1); 

foreach($sort1 as $key=>$value){
    //do sutff;
}