Writing jQuery Drag & Drop selection into PHP Variables

Question

I have implemented the image Drag an Drop as seen in the following example: http://jqueryui.com/droppable/#photo-manager. I have added the ID's for each image element so that I can create a list of the Trashed elements and another for the ones that stay untouched.

I could really use some help on getting the selected and non-selected id's into PHP variables after the dropping took place.

Starting UL gallery (Draggable) Image element with id e.g.:

  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
      <img src="img/gler.png" alt="lake" width="96" height="32" id="2">
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
  </ul>

Trash DIV (Droppable)

  <div id="trash" class="ui-widget-content ui-state-default">
 <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span>       Trash</h4>
  </div>

Answer 1

Using javascript you'll need to build an array of ids in each container like this:

var selected = [],
    unselected = [];
$('#gallery img').each(function(){
    selected.push($(this.attr('id'));
});
$('#trash img').each(function(){
    unselected.push($(this.attr('id'));
});

You may trigger this action using an event such as after each drop or when a user clicks a done button, whatever. Now pass those arrays to the server however you like(refresh the page or ajax call).