Question

I have two droppable divs that are very close to each other on the screen (note: they are not nested). A large draggable div is dragged on top of the two divs; when the mouse is released, the draggable happens to fall on both droppable divs (i.e. two droppable events are fired).

What I would like to happen, is that in this scenario, the draggable will fall on only one droppable and nother other. Order does not matter at all.

What is the best way in doing this?

One inefficient way that came to my mind is keep track of all droppable event timestamps, and reject a droppable event if it has a timestamp that was already stored before in some array.

Answer 1

I was able to solve my problem in a slightly different way. Let me first recap what my situation is again:

1. I have two droppable div objects that are very close to each other on the screen
2. I have a draggable div, that does not have a unique ID. This draggable can be dropped on my droppables time and time again (i.e. it doesn’t get consumed, if that makes any sense)
3. When a draggable is on top of two droppables, currently the jquery behaviour is that the draggable will hit both droppables. This is an undesired effect for me.

4. My expected behaviour: the draggable should fall on the first droppable only, and should not get triggered for any other subsequent droppable which is around.

   var tsArray = new Array();

   $(‘.droppable’).droppable({
   drop : function() {

   for (var i = 0; i < tsArray.length; i++) {
       if (tsArray[i] + 150 > ev.timeStamp) {
           return;
       } 
   }
   
   tsArray.length = 0; // Empty it for performance
   tsArray.push(ev.timeStamp);
   
   // Do any logic you require here   
   

   });

The basic idea is that when a draggable is dropped on two droppables, the event timeStamp of each droppable event are very close to each other. They are milliseconds apart. I simply do a check to ensure that there is a substantial time difference between them.