Question

I created a calendar style screen whereby each Room goes down the page and the columns(for time) go horizontally. Each Room div is set to overflow:hidden.

I wanted to make the entries draggable/droppable so that they could be moved from one time/room to another. The problem is when dragging they won’t move out of the Room div they are in they hide under the boundaries of it instead most likely because of the overflow:hidden.

I don’t have time to rewrite the layout of the screen, is there someway to make them drag out of the div and to the rest of the screen?

Answer 1

Just a random thought/ idea

You can create a “fake” object in the div you are dragging into, and have it positioned so it looks like you are dragging the real object over the border and into the div with the fake object.

ASCII Example

|´´´´´´´´´´´´´|
|     []      |
|     []      |
|_____________|

Now you drag this object into a div below it

|´´´´´´´´´´´´´|
|    Div1     |
|             |
|_____[]______|
|´´´´´[]´´´´´´|
|             |
|    Div2     |
|_____________|

What I wanted to do was create an object in Div2, that also has its content hidden due to overflow:hidden. So you have 2 objects, the real object your dragging in Div1, and a fake / illusion object in Div2 that moves exactly like the object in Div1. Once you move the real object from Div1 completely into Div2, you transfer the real object into Div2, and remove the fake object from the Dom