CODEWITHSUNDEEP
jquerydrag-and-drop
Alan Whitelaw
Alan Whitelaw

Reputation: 16880

Can't drop jquery ui helper on droppable

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?

Upvotes: 6

Views: 8104

Answers (2)

calasyr
calasyr

Reputation: 346

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.

Upvotes: 1

Jason Benson
Jason Benson

Reputation: 3399

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

Upvotes: 11

Related Questions