Can't drop jquery ui helper on droppable

Question

Why will this code not let me drop the helper onto the droppable region?

  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="product_helper"></div>');
    }
  });
  $(".droppable").droppable({
    accept: '.product_helper',
    drop: function(event, ui) {
      $(this).append( ui.helper );
    }
  });

Is it even possible to drop a helper onto a droppable?

Answer 1

It's completely possible to drop a clone of the helper however the helper itself (as in your example) cannot be dropped.

Here's a jsFiddle demonstrating dropping a cloned helper: http://jsfiddle.net/jKabn/1/

Here's the related code:

  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
      return $('<div class="helper">Helper</div>');
    }
  });
  $(".droppable").droppable({
    drop: function(event, ui) {
           //clone and remove positioning from the helper element
           var newDiv = $(ui.helper).clone(false)
               .removeClass('ui-draggable-dragging')
               .css({position:'relative', left:0, top:0});  

           $(this).append(newDiv);
    }
  });

The helper is removed after drop is executed in jquery. To keep it you'll need to remove the draggable specific css and positioning as well as clone the element. In the jsFiddle there's also a demonstration for dropping "draggable" element as well (not that it was particularly relevant to your question I was just adding it for myself.)

Hope that helps

Answer 2

one problem I had was having a draggable element that too wide to be dropped on to a droppable element if the tolerance option is at the default value of 'intersect'.

'intersect' means the draggable can be dropped when it 50% of it is over the droppable. And that's impossible if its more than twice as wide.

My draggables had a variable value, so their width varied and whether they could be dropped varied too. I used 'pointer' instead and it goes by where the mouse is.