Draggables to sortable list, with DOM changes to the dragged element..?

Draggables to sortable list, with DOM changes to the dragged element..?


I am having some challenges here.
I was wondering if it was possible to drag a very simple list-item
onto a sortable list and when releasing the draggable, append a
different kind of HTML to this sortable list..?
Lets say that we have the following two lists:
<ul class="draggableElements">
<li><span>label and textbox</span></li>
<li><span>label and textarea</span></li>
<li><span>label and checkbox group</span></li>
<li><span>label and radiobutton group</span></li>
<ul>
<ul class="sortableList">
<li><label>[labeltext]</label><input type="text" value="textbox
text" /></li>
<li><label>[labeltext]</label><textarea>textarea text</textarea></
li>
<li><label>[labeltext]</label><input type="checkbox" value="1" /></
li>
....
</ul>
When dragging a list item from the "draggableElements" list onto the
"sortableList", is it then possible to change the content of the
dragged element..? So that it changes from being a very simple
description text to an actual label and input field?
I have got the dragging part from one list to another working, so it
is just the transformation, that I am looking for.
I have thought of using the beforeStop element to change either the
ui.helper or ui.item. But it doesn't seem to affect anything.
I am looking forward to your replies.
Yours sincerely
Steen Nielsen