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, lef         


        

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 $('
Helper
');
    }
  });
  $(".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