Unable to remove jquery ui helper on droppable

Question

Why does this code not allow me to place the helper in the dropable area?

$(".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 omit the helper on droppable?

Answer 1

You can completely remove the assistant clone, but the helper itself (as in your example) cannot be deleted.

Here jsFiddle demonstrates resetting the cloned helper: http://jsfiddle.net/jKabn/1/

Here is 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); } }); 

Helper is deleted after the frame is executed in jquery. To save it, you need to remove the draggable specific css and positioning, as well as clone the element. JsFiddle also has a demo for removing the "draggable" element (not that this was especially true for your question, I just added it for myself.)

Hope that helps

Answer 2

I had a problem with a draggable element that is too wide to be dropped onto a droppable element if the tolerance parameter has a default value of 'intersect'.

'intersect' means that the draggable can be dropped when it is 50% compared to droppable. And this is impossible if it is more than twice as wide.

My drags were variable, so their width varied and they could be dropped. Instead, I used a "pointer" and it goes where the mouse is.