JQuery ui drop helper

Question

Using jQuery and jQuery UI, I have a drag and drop area, the draggable element 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 added in the droppable area?

Answer 1

After a bit more research and another question, I dealt with this.

In the drop event on the droppable element, you need to clone the helper, since you cannot delete the actual helper that is displayed during drag and drop.

 $("#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 auxiliary function use

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