//Arrastrar items
$('.supermercado div,.lista div').draggable({
    cursor: 'pointer',
    connectWith: '.lista',
    helper: 'original',
    opacity: 0.5,
    zIndex: 99,
    revert: true
});


//Reordenamiento de los items
$('.lista,.supermercado').sortable({
    connectWith: '.lista,.supermercado',
    cursor: 'pointer'
}).droppable({
    accept: '.supermercado div',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div value="' + ui.draggable.attr("value") + '">').html(ui.draggable.html());
        $li.appendTo(this);
        ui.draggable.hide();
        valores();
    }
});

function valores() {
    var valores = "";
    $('.lista div').each(function() {
        valores += $(this).attr("value") + ",";
    });
    $("#productos").val(valores.substr(0,(valores.length-1)));
}

//Arrastrar items
$('.supermercado div,.lista div').draggable({
    cursor: 'pointer',
    connectWith: '.lista',
    helper: 'original',
    opacity: 0.5,
    zIndex: 99,
    revert: true
});


//Reordenamiento de los items
$('.lista,.supermercado').sortable({
    connectWith: '.lista,.supermercado',
    cursor: 'pointer'
}).droppable({
    accept: '.supermercado div',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div value="' + ui.draggable.attr("value") + '">').html(ui.draggable.html());
        $li.appendTo(this);
        ui.draggable.hide();
        valores();
    }
});

function valores() {
    var valores = "";
    $('.lista div').each(function() {
        valores += $(this).attr("value") + ",";
    });
    $("#productos").val(valores.substr(0,(valores.length-1)));
}�

//Arrstrar items
$('.supermercado div,.lista div').draggable({
    cursor: 'pointer',
    connectWith: '.lista',
    helper: 'original',
    opacity: 0.5,
    zIndex: 99,
    revert: true
});


//Reordenamiento de los items
$('.lista,.supermercado').sortable({
    connectWith: '.lista,.supermercado',
    cursor: 'pointer'
}).droppable({
    accept: '.supermercado div',
    activeClass: 'highlight',
    drop: function(event, ui) {
        var $li = $('<div value="' + ui.draggable.attr("value") + '">').html(ui.draggable.html());
        $li.appendTo(this);
        ui.draggable.hide();
        valores();
    }
});

function valores() {
    var valores = "";
    $('.lista div').each(function() {
        valores += $(this).attr("value") + ",";
    });
    $("#productos").val(valores.substr(0,(valores.length-1)));
}​

Con esta líneas de programación, puedes crear listas Drag & Drop utilizando jQuery UI; permitiendo al usuario reorganizar los "items" seleccionados.

El funcionamiento interno, permite el envío usando un formulario ya sea por GET o POST.

Crear listas usando Drag & Drop y ordenarlas con jQuery UI

jQuery