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'
});
Well if you want the ID to stay with the clone here is one way to do it.
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');