How do I customize the helper using draggable in jQuery-UI

Question

I want to make a custom element with text taken from the element "being dragged" using a helper function. My problem is that ui is undefined, so I don't know how to get a hold of the source of the drag.

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

Answer 1

The helper function you're applying is invoked the following way:

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

That means that this refers to the .draggable you want inside that function, for example:

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

You can test it out here.