0

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?

Senthil Kumar
  • 9,695
  • 8
  • 36
  • 45
user1166905
  • 2,612
  • 7
  • 43
  • 75

1 Answers1

0

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

thmsn
  • 1,976
  • 1
  • 18
  • 25
  • Pardon my ignorance but I don't follow what you mean here? – user1166905 Aug 02 '12 at 10:16
  • I tried explaining it more with an ASCII Example, its just a random idea, the easiest solution might be to actually redesign your page layout. – thmsn Aug 02 '12 at 10:23
  • Trust me it's not the easiest solution to redesign, it's not really an option I have. Is there no simple method of draggable that's similar to helper:clone that would create the same effect as this example? – user1166905 Aug 02 '12 at 10:29
  • http://stackoverflow.com/questions/811037/jquery-draggable-and-overflow-issue has the same issue it seems, one of the answers might help you – thmsn Aug 02 '12 at 11:01
  • Thanks, one of the answers got it working perfectly. Had to include this: appendTo: 'body' – user1166905 Aug 02 '12 at 11:48
  • Seems logical, because then the object is removed from the original container and floating around in the body. – thmsn Aug 02 '12 at 12:10