jquery ui drop helper

Question

Using jQuery and Jquery UI, I have a draggable and droppable area, the draggable item has the following helper

  $(".draggable").draggable({
    revert: 'invalid',
    grid: [ 20,20 ],
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="helper"></div>');
    }
  });

How do I get the helper to be added to the droppable area?

Answer 1

After a bit more investigation and another question I have worked this out.

The in the drop event on the droppable element you need to clone the helper as you cannot drop the actual helper that shows during dragging.

$("#droppable").droppable({
  drop: function(event, ui) {
    var newDiv = $(ui.helper).clone(false)
      .removeClass('ui-draggable-dragging')
      .css({position:'absolute', left:0, top:ui.offset.top - 12});
    $(this).append(newDiv);
  }
});

Thanks also to Jason Benson.

Alan

Answer 2

in the helper function use

$(this).append('<div>somecontent</div>');