Scriptaculous Drag/Drop across BorderLayout panels

[mark.lozano]

I am testing out some of the functionalities of some of the libraries available to me at work, in my off time. So I decided to see how easy drag and drop is with Scriptaculous. It was super easy:

• Demo Page
• CSS
• Javascript - (see the initDragAndDrop() method)

As you can see you can easily drag items from the left to the drop target on the right.

Then I decided to try out the layout stuff from Ext JS. I essentially just added a layout method and tossed the appropriate divs in their spots:

• Demo Page
• CSS
• Javascript - (see the createLayout() method)

As you can see, in the page with the layout, the items I drag do not visibly cross the slider boundary. The drop event is still doing its thing (I guess based on mouse position), but the dragged item doesn't make it all the way. My assumption is that the ContentPanel has it's overflow set to hidden ... and probably for good reason.

Does anyone have any ideas how I might be able to fix this? Is there a setting on the ContentPanel or the layout that I am missing?

Any help would be greatly appreciated.

[mark.lozano]

Also, I'd be willing to use the Ext JS drag and drop stuff. But I can't find a simple and clean example of how to use it. That's where Scriptaculous shined for me.

If anyone can show me the equivalent in Ext I'd be happy to use it.

[evant]

I had a similar problem using JQuery. You need to set the z-index of your drag proxies reasonably high (try 12000 to begin with).

[anandr]

Did you figure out how to make this work? Setting the z-index of the linked element to a high number did not seem to work for me. Any help or alternate solution is much appreciated.

[karel-jan]

Did anyone find a sollution to this problem? Because I'm havving the same problem.
And z-index isn't working.

Thanx

[enlaan]

I'm stuck with the same problem.
Did anyone find a way around it ?
regards