6

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?

Alan Whitelaw
  • 16,171
  • 9
  • 34
  • 51

2 Answers2

11

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

Jason Benson
  • 3,371
  • 1
  • 19
  • 21
  • Thanks, +1 for clear explanation of the problem (not being able to drop the helper, but needing to clone it) and for the working js fiddle. I added a `.css({position:'absolute', left:0, top:ui.offset.top});` so that the dropped helper maintained its position. Thanks – Alan Whitelaw Jan 11 '11 at 23:53
  • No problems glad I could help. Additionally if you just reset your left and top css attributes the dropped clone will maintain position: absolute. (The reason I set it to relative was that I wanted it to stack in the drop area). – Jason Benson Jan 12 '11 at 15:22
  • I want same functionality but 'droppable' should also support 'sortable' but facing some issues here http://jsfiddle.net/6J3AB/ . Any suggestions? – Ashok Jul 16 '14 at 19:07
1

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.

calasyr
  • 346
  • 2
  • 7