0

I have a small problem which i can't seem to solve myself. Look at this fiddle:JSfiddle

This is a basic example of the problem I have. I have a large div which is a droppable area. Inside this droppable area are multiple other droppable areas.

The inner droppable area should walk trough its code when the element is dropped. Instead the code from the outer div seems to run. Am i doing something wrong? The area around the divs should stay this way because elements can be placed here (not officially dropped).

I hope my question is clear enough, but I think the fiddler speaks for itself.

P.S. - resizing in this example isn't functioning but is functioning in my development environment.

Rusty and Mark, Thank you for your replies.

I'm sorry for the confusing resizer. I just removed that from the code. New Fiddler

Just to clarify things. The box div is a container which has multiple images in it. I am trying to achieve the following: http://postimage.org/image/qwhtik04f/ The grey dotted boxes are the dropbox2 div from my example. The space around those drop boxes are dropbox div.

The space with the board is the only place where images may be dropped without anything happening. The dragged images can snap back to the dropbox2 divs. If the images are dragged onto the dropbox div, the images should revert.

Kev
  • 118,037
  • 53
  • 300
  • 385
luuk86
  • 149
  • 1
  • 3
  • 10
  • 1
    Since you are asking about drag and drop, I would remove the resizing code from your jsFiddle example. That'll make it simpler and less prone to issues with unused code. – RustyTheBoyRobot Jun 29 '12 at 14:27
  • Mark and I are confused about the outer div. You say that it should accept drops, but your jsFiddle code forces a revert. Which are you aiming for? – RustyTheBoyRobot Jun 29 '12 at 16:01

2 Answers2

2

Setting the greedy: true option on the inner droppable will prevent the event from happening on the outer droppable:

jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});
Mark Eirich
  • 10,016
  • 2
  • 25
  • 27
0

Your code has this for the outer <div>:

$("#dropbox").droppable({
    drop: function(event, ui) {
       ui.draggable.draggable( 'option', 'revert', true );
    }
});

This says to set the revert option to true when you drag into the outer <div>. However, when you drop in the smaller <div>, the option is still set to true. All you need to do is change the revert value on your draggable element after a successful drop in your inner <div>:

$("#dropbox2").droppable({
    drop: function(event, ui) {
        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
        // Add this line
        ui.draggable.draggable( 'option', 'revert', false );
    }
});

Update:

Mark pointed out that my solution doesn't stop the propagation of the event to the parent container. As his answer shows, you need to add greedy: true in your initial options. The jQuery documentation says:

If true, will prevent event propagation on nested droppables.

That sounds like what you're looking for. You still need to change the revert property on your draggable, since greedy is only set on your droppables and won't affect your draggable reactions.

RustyTheBoyRobot
  • 5,891
  • 4
  • 36
  • 55
  • Your solution does not prevent the drop handler on the outer div from being run. – Mark Eirich Jun 29 '12 at 15:06
  • @MarkEirich - Haha, and your solution doesn't change the `revert` property, so the drop reverts. We need to combine our answers :). – RustyTheBoyRobot Jun 29 '12 at 15:43
  • It isn't clear to me what behavior was desired for drops on the outer div... "The area around the divs should stay this way because elements can be placed here (not officially dropped)." – Mark Eirich Jun 29 '12 at 15:51
  • @MarkEirich - Yeah, I was a little baffled about that as well. It sounds like he wants to drop stuff there, but his code says to reject drops. – RustyTheBoyRobot Jun 29 '12 at 15:52
  • One final fiddler with the solution to this problem. Just for other people to use. [link](http://jsfiddle.net/4sNv2/29/) – luuk86 Jul 02 '12 at 06:29