problem prepending draggable helper in droppable drop event
I have a situation where I wanted to prepend the draggable's helper to a droppable target. The trick is that this draggable helper is a jquery object that I'm creating on the fly like so: $('<li>...</li>'). For some reason prepend won't insert this ui.helper object that I get in the droppable drop event.
I've worked around this by simply recreating the element I want to insert inside the droppable drop event and prepending that rather than trying to prepend the ui.helper object. As far as I can tell they are identical, except that the helper doesn't have a context.
Just curious whether this was a bug, or expected behavior and perhaps I was trying to make helper more than it is. The documentation states that the helper function must return a DOMElement, which I think I am doing, though it isn't attached anywhere.
- <script type="text/javascript">
- $(document).ready(function(){
- $('#dropTarget').droppable(
- {
- tolerance:'pointer',
- drop:function(event,ui)
- {
- // change this to insert the ui.draggable and it works
- $(this).siblings('ul').prepend(ui.helper);
- }
- });
-
- $('#dragTarget').draggable(
- {
- revert:'invalid',
- helper:function()
- {
- return $('<li>Drag Helper</li>');
- }
- });
- });
- </script>
- <ul>
- <li id="dragTarget" style="cursor:move;">Drag Target</li>
- </ul>
- <div id="dropTarget">Drop Target</div>
- <ul>
- <li></li>
- </ul>