How to configure helper using draggable in jQuery-UI

Question

I want to create a custom item with text taken from a drag-and-drop item using a helper function. My problem is that ui is undefined, so I don’t know how to hold the drag source.

$('.draggable').draggable({ helper: function(event, ui) { var foo = $('<span style="white-space:nowrap;">DRAG TEST</span>'); return foo; } }); 

Answer 1

The helper function that you use is called as follows :

  $(o.helper.apply(this.element[0], [event])) 

This means that this refers to .draggable , which is required inside this function, for example:

 $('.draggable').draggable({ helper: function(event) { return $('<span style="white-space:nowrap;"/>') .text($(this).text() + " helper"); } }); 

You can check it out here .