Question

I am now able to drag an item to a sortable. But the sortable list has a different DOM.

<!-- The draggable items. Has the 'original' DOM in the LI tags. --> <ul class='draggable_text'>     <li><span>DRAG THIS A</span></li>     <li><span>DRAG THIS B</span></li> </ul>   <!-- This list has a different DOM in the LI tags --> <ul id='stagerows'>     <li><p>This is a new DOM dragged from 'DRAG THIS A'</p></li>     <li><p>This is a new DOM dragged from 'DRAG THIS B'</p></li> </ul>  $(document).ready(function() {     $('.draggable_text > li').draggable({         //helper:'clone',         helper: function(event, ui) {             return '<div style='width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;'>xxx</div>';         },         connectToSortable:'#stagerows'     });      $('#stagerows').sortable({         handle: '.drag_handle'     }); }); 

The Helper has this: xxx This should be dropped into the sortable…

The ‘helper’ works. But when I ‘dropped’ the item into the sortable, it just reverts back to the ‘original’ DOM. I would want the ‘newly created DOM’ (the one created in helper) to be dropped into the sortable.

I hope I am making sense. Thank you!

Another way of saying it: when I drag an apple, it now turns into an orange. but when i drop it, it turns back into an apple..

Answer 1

$('.draggable_text > li').draggable({     helper: function(event, ui) {         var type = $(this).find('.link_type').val();         return create(type,0);     },     connectToSortable:'#stagerows' });  $('#stagerows').sortable({     handle: '.drag_handle',     placeholder: 'placeholder_sortable' });  /**  * When item is dropped from the Add <Stuff>  */ $('#stagerows').droppable({     drop: function(event, ui){         type = ui.draggable.find('.link_type').val();         ui.draggable.empty();         return ui.draggable.html(create(type,0))     } });