2

Just like in my fiddle http://jsfiddle.net/meridius/95Wej/ I have some elements (draggables) which I want to programmatically (just by code, no user interaction) move to their corresponding droppables. This I can do.

What I don't know is why .droppable("drop") event isn't firing up.
I need droppable to register that it has draggable on it. Otherwise (in my more complex setup) there is some strange behavior when user moves that draggable.

I tried to .trigger("mousemove"), mousedown, reinitialize .droppable() after .position(), but none of that helped.

EDIT:
"Strange" behavior was caused by maintaining position:relative;, which I solved by setting it to absolute before calling .position().
Nevertheless the question about why the event isn't fired remains.

meridius
  • 1,495
  • 1
  • 18
  • 26
  • possible duplicate of [How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?](http://stackoverflow.com/questions/3188130/how-do-i-trigger-the-drop-event-with-jquery-ui-droppable-without-actually-draggi) – apaul Nov 04 '13 at 15:29
  • Checkout the second answer, it should give you what you need. – apaul Nov 04 '13 at 15:30
  • Like so: http://jsfiddle.net/95Wej/4/ – apaul Nov 04 '13 at 15:31
  • @apaul34208 Thank you for showing the way. But I can't access the draggable (`ui` element) by calling the `.droppable('option', 'drop')` function as suggested; console.log is telling me that `ui is undefined`. Here is my updated fiddle http://jsfiddle.net/meridius/95Wej/6/ Do you know why? – meridius Nov 05 '13 at 08:10
  • http://stackoverflow.com/a/29284621/278405?programmatically-drag-and-drop-element-onto-another-element – cychoi Mar 28 '15 at 20:12

2 Answers2

2

The drop event handler on droppables is a bit strange. If you initialize the droppable with an event handler for the drop event like so:

$('div.droppable').droppable({drop: dropFn});

Then dropFn is the only function that gets called when an element is dropped on the droppable and you can't get it to be called using just the .trigger method. Instead, what you need to do is initialize the droppable without an event handler for the drop function and then bind the event handler for the drop event later like so:

$('div.droppable').droppable().on('drop', dropFn);

User initiated drops won't be affected but now you can trigger the drop event in your code. When you do this you have to provide a substitute for the ui object described here like so:

$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...});

I achieve moving the draggable to the droppable by setting the position of the droppable to "relative", dynamically (using a call to .css) setting the following CSS on the draggable to the following:

div.draggable {
    position: absolute;
    left:     0;
    top:      0;
}

And then detaching and appending the draggable to the droppable:

$('div.draggable').first().detach().appendTo($('div.droppable').first());

This answer helped me: https://stackoverflow.com/a/21279352/1852838.

In my examples I always used the first draggable or droppable but you should be able to adjust this to your specific application easily.

Community
  • 1
  • 1
jeteon
  • 3,471
  • 27
  • 40
0

Its not firing becouse you are not droping and element there. You are using the .position function of jquery to move the dragable into the dropable. So your goal is to use the callback of moving function.

$(this).position({
  of: "." + $(this).data("target")
}, function(){
  //do some stuff
});

Becouse you are inside an .each loop this callback function is fired multiple times.

ggzone
  • 3,661
  • 8
  • 36
  • 59
  • 1
    No, my goal is to use already defined .droppable("drop") function. I'd like to avoid redefining it, although it seems like the only solution so far because I can't access the `ui` object of that function as suggested by @StuperUser in http://stackoverflow.com/a/3647016/836697. – meridius Nov 05 '13 at 08:03