5

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?

Alan Whitelaw
  • 16,171
  • 9
  • 34
  • 51

2 Answers2

7

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

Community
  • 1
  • 1
Alan Whitelaw
  • 16,171
  • 9
  • 34
  • 51
0

in the helper function use 

$(this).append('<div>somecontent</div>');
Will
  • 6,179
  • 4
  • 31
  • 49
  • 1
    That doesn't seem to work. My understanding of the helper function was that it creates the HTML to be used as the helper. I would like that helper to remain visible if it is dropped onto a droppable area. Thanks for your answer – Alan Whitelaw Jan 11 '11 at 10:27