jquery draggable into sortable strips id

Question

I have a list of standard text items from a 'library' that users can drag into a sortable list so they can build (and modify) their own document. Both lists are created from an Ajax call. Note that I have created the receiving list before the donor one and it is all wrapped in a $(document).on change function

After checking numerous posts here I have the drag and drop working but the process is stripping out the id of the dragged element. That, of course breaks the serialize and update processes.

I am using JQuery 1.10.2 and JQueryUI 1.10.3 where connectWith seems to have been replaced by connectToSortable

Here's a complete example (also on jsFiddle: http://jsfiddle.net/Dy2Ft/8/):

EDIT: I have changed the id in the first list to call it 'ref' and added a stop event to grab the ref value (which it does because I tested it with an alert) and then attempted to add the id with a value of ref to the item but it does the update on the original rather than the clone. So I am still stuck but a bit further forward. At least there will be no duplicate IDs

HTML:

<select id='confiss'>
    <option value='1'>Document One</option>
    <option value='2'>Document Two</option>
</select><br />    
<ul id="libry">
<li ref="listItem_1" class="phlis ui-draggable" >
<img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">
  This is the first test phrase
</li>
<li ref="listItem_2" class="phlis ui-draggable">
<img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">
  This is the second phrase
</li>
    <li ref="listItem_3" class="phlis ui-draggable" ><img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">This is the third phrase</li>
</ul>
    <div>The target list is below me</div><br />
<ul id="contphrss" class="ui-sortable sort-list"><li id="listItem_0" class="phlis ui-draggable" ><img class="handle" width="16" height="16" src="http://s17.postimg.org/7mb9zwkuz/arrow.png" alt="move">This is a false placeholder</li>
</ul>

CSS:

.sort-list li {
    display: block;
    padding: 3px 3px; margin-bottom: 3px;
    background-color: #efefef;
}

.sort-list li img.handle {
    margin-right: 20px;
    cursor: move; 
}
.phlis{display: block;
    padding: 3px 3px; margin-top: 3px;
    background-color: #FFAAFF;}

JavaScript:

$('#contphrss').sortable({
    handle: '.handle',
    update: function () {
        var order = $('#contphrss').sortable('serialize');
        var contr = "&cont=" + $('#confiss option:selected').val();

    }
});
$('.phlis').draggable({
    cursor: 'move',
    helper: 'clone',
    opacity: 0.45,
stop: function(event,ui){
var newid =$(this).attr('ref');
$(this).attr('id',newid );
},
    connectToSortable: '#contphrss'
});

Answer 1

Well if you want the ID to stay with the clone here is one way to do it.

var id = '';
$('#contphrss').sortable({
    handle : '.handle', 
    update : function (event, ui) { 
        ui.item.attr('id',id);   
        var order = $('#contphrss').sortable('serialize');
        var contr="&cont="+$('#confiss option:selected').val();

    },
    receive: function (event, ui) {
        id = ui.sender.attr('id');    
    }
});

Example

http://jsfiddle.net/trevordowdle/Dy2Ft/10/

Update

EDIT by emulite To protect the integrity of the DOM I have used the attribute 'ref' to pass the value as per the modified HTML above and modified the answer to pick that up. This makes it work beautifully

id = ui.sender.attr('ref');