Custom helper for jQuery UI Draggable

Question

I have a jQuery UI draggable, and I've tried to create a custom helper which would contain some but not all information of the original element.

Here's my draggable elements;

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

And jQuery;

$("ul li").draggable(function(){
  helper: function(){
    return $("<div></div>");
  }
});

The idea would be that while dragging, the user would have a helper that contains only the name, but not the time element.

My actual code is slightly more complex than this even, so what I'm really looking for is any selector that would allow me to select the original element, or a copy of it, and then do all kinds of jQuery magic on it (filtering elements, adding new elements, classes, etc.)

However, for my life I can't find this, the documentation of draggable sucks and nobody at #jquery would help me. Any ideas?

Thanks in advance!

Answer 1

First your way of calling draggable is faulty. The expected parameter is an object literal, not a function.

this is the currently dragged element in the helper function.

Having the following html

<ul>
  <li><div class="name">Name</div> <span>12-12-2011</span></li>
  <li><div class="name">Another name</div> <span>12-12-2011</span></li>
</ul>

You can do this:

$('ul li').draggable({
    helper: function() {
        //debugger;
        return $("<div></div>").append($(this).find('.name').clone());
    }
});

Note: I have added class to the <div> representing the name for the sake of selecting it but you can find any other way to do so.

Here's a jsfiddle for you to check.