problem prepending draggable helper in droppable drop event

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.

  1. <script type="text/javascript">
  2.       $(document).ready(function(){
  3.       $('#dropTarget').droppable(
  4.             {
  5.                   tolerance:'pointer',
  6.                   drop:function(event,ui)
  7.                         {
  8.                               // change this to insert the ui.draggable and it works
  9.                               $(this).siblings('ul').prepend(ui.helper);
  10.                    }
  11.             });
  12.       
  13.       $('#dragTarget').draggable(
  14.             {
  15.                   revert:'invalid',
  16.                   helper:function()
  17.                         {
  18.                               return $('<li>Drag Helper</li>');
  19.                         }
  20.             });
  21. });
  22. </script>

  23. <ul>
  24.       <li id="dragTarget" style="cursor:move;">Drag Target</li>
  25. </ul>

  26. <div id="dropTarget">Drop Target</div>
  27. <ul>
  28.       <li></li>
  29. </ul>


    • Topic Participants

    • seth