How can I add an attribute to a new LI after dropping

I have 2 lists:

<h3>Available page layouts</h3>

<ul id="pagepool" class="connectedSortable">
    <li id="I1" class="ui-state-default"></li>
    <li id="I2" class="ui-state-default"></li>
    <li id="I3" class="ui-state-default"></li>
    <li id="I4" class="ui-state-default"></li>
    <li id="I5" class="ui-state-default"></li>
</ul>

<h3>Document structure</h3>

<ul id="docstruct" class="connectedSortable"></ul>

Items from the "pagepool" list are dragged (cloned) into the "docstruct" list and are then manually sortable. There can be duplicate page styles in the docstruct list (with duplicated id attributes).

What I'd like to do is request a unique md5 hash via a php file / ajax and add that hash to the rel attribute of the dropped item, after the item is dropped. Everything I've tried so far updates the "pagepool" original item.

How can I modify this to target the cloned item only?:

$( "#pagepool li" ).draggable({

           connectToSortable: '#docstruct',
           helper: 'clone',
           revert: 'invalid',
           opacity: '.7'

                              });

$( "#docstruct" ).sortable({
           placeholder: "ui-state-highlight",
           revert: true,
           receive: function(event, ui) {
           $.get('ajax/uniqid.php', function(data){ui.item.attr('rel', data)})     
                          开发者_开发百科                      }       
                          });

---

Not sure why this is the case, but here is what I've found.

In the receive event, you cannot access the actual item that is being created in the sortable list. Helper points to a clone that is used just for the dragging, item is the original item that you clicked on to drag.

But, the beforeStop event fires just before the receive event. In beforeStop, the item is actually the item in the list. So, in beforeStop you can save the item and then use it in receive.

Demo here: http://jsfiddle.net/kcg29/