Drop between two adjacent containers

[parshin]

JSFiddle: ​http://jsfiddle.net/fec3e34n/1/

There are two droppable adjucent green divs without margin, border and padding. And orange draggable div.

If you move slowly orange div vertically from the first div to the second, there will be position where none of the divs are hovered (blue background indicates hover state).

I think that it is wrong since there is no visual gap between the divs.

Tested in latest Chrome, FF and IE11.

[Scott González]

That's because tolerance: "intersect" requires at least 50% overlap. So do you want both active or neither active? If you want exactly one active the whole time, increase the draggable element by 1 pixels.

[Scott González]

Sorry, I started changing the title, but then stopped. I've changed it back until we hear back from the reporter.

[parshin]

I want exactly one active whole time.

But you are right - it is very unclear what is the correct behavior if we say about "at least 50% overlap". It wasn't obvious for me before your answer, thanks!

Odd width and height is nice solution, but sometimes it is difficult to control container size with pixels precision...

If we talk about pixels, we can say "central pixel of draggable should be inside droppable". This statement is very close to definition of "tolerance:intersect", but it uniquely selects one of adjacent containers. But I'm not sure that central pixel is better then 50% overlap in general and not sure that my case with adjacent divs is very important.

Thanks again for clarification!

[Scott González]

Sounds like you probably just want to use a different tolerance, perhaps "pointer".