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.

Answer 2

OK, with a quick test the following will work....

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

notice you do not pass a function as a draggable parameter. Also, I have added "hello" to the example so the helper DIV actually contains something.

EDIT: This seems to prevent the element being dropped, hmmm...

A FIX: Not pretty, but this works, maybe it can give some ideas for improvement...

var remember;
$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        remember = $(this).html();
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html(remember);
    }
});

Example Here

If you don't like the idea of the "remember" variable it seems to be ok to add a custom option to the draggable object that can hold the original html...

$("ul li").draggable({
    helper: 'original',
    start: function(e, ui) {
        $(this).draggable("option", "olddata", $(this).html());
        $(this).html("<div>hello</div>");
    },
    stop: function(e, ui) {
        $(this).html($(this).draggable("option", "olddata"));
    }
});

Answer 3

One possible solution is

Fiddle: http://jsfiddle.net/SWbse/

   $(document).ready(function() {
      $("ul li").draggable({
         helper: 'clone',
         start: function(event, ui){
            ui.helper.children('span').remove();
         }    
     });
   });