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..