[TYPO3-templavoila] How to trigger a JS function when dragging an content element over a tab

[Ron Hall]

Hello all,

I have something I would like to do but need suggestions as to if it is practical.

I use beLayout and javascript to arrange my TemplaVoila backend content into tabs. Each content field has a tab which when clicked shows the content for that field and hides content from other fields. I find this makes the backend easier to use and cuts down on the amount of scrolling when editing. You can see what I am talking about in this YouTube Video -- http://www.youtube.com/watch?v=yNvdpJQjb9g. Skip forward to about 2 1/2 minutes into the video and watch about the next 30 seconds.

What this means however is that I can use drag n drop within a content area but not between areas as only one is visible at a time. What I would like to do is drag an element onto the tab of a content field and that trigger the opening of that content area so I can drop the element into that area. In other words, if an element is in Main Content, I could drag it to the Content Area 2 tab and have that trigger my JS function for opening that area just like it does now when I click on that tab.

I have tried using a prototype hover function. It opens the area when I hover but not when I drag an element on top of the tab. Anyone have any ideas how this can be done using JS added to the beLayout tag and without having to touch any of the extension's code for drag n drop?

Thanks,
Ron