Atlas DragOverlayExtender Quirk
Well I suppose the title of this post should really read "ASP.NET 2.0 AJAX Extensions DragOverlayExtender Quirk" because, as you probably know, Scott Guthrie recently posted about the roadmap and name changes for Atlas. Anyway, to the point of the post. I have an asp.net demo site that's based on master pages, themes, CSS friendly control adapters etc and uses CSS layout to give me the foundation of a site to demo just about anything ASP.NET related. When the project formerly known as Atlas was announced, I simply extended my demo site with Atlas bits and used that as the basis of any Atlas demos.
One quirk struck me at the time though, and that related to the use of the DragOverlayExtender control. The DragOverlayExtender is an Atlas extender control that allows you to add drag & drop functionality to an ASP.NET server control. I simply place a DragOverlayExtender on my page and set its TargetControlID property to the ID of the control I want to "float" and voila, I have a dragable control.
However, when I tested this on my demo site I noticed a bit of a quirk. Actually, two quirks. Quirk #1 is well known and easily resolved and stems from the fact that you can only drag a control to an "active" area of your page. The effect you see is that you can drag the control okay but when you drop it the control returns to its original position. The solution is to set the height of the body or a framing <div> to cover the area you want to drag into (ie with something like <body style="height:100%">). Quirk #2 is a little more elusive though and so far I've only tracked it as far as the CSS positioning I use in my layout. The effect in this case is that the target element of the DragOverlayExtender "jumps" when you start the drag. You can see an example here (or embedded in the post below). The blue box is an ASP.NET Panel control with a DragOverlayExtender attached. When you click to drag you'll notice the element shifts position.
Has anyone else seen this? The frustrating thing for me is I redesigned my demo site last week and based the layout on one of the standard CSS layouts from Expression Web as I really want to get into the habit of using this tool alongside Visual Studio. What I'd forgotten is that I'd tweaked my CSS in the dim and distant past to get around this DragOverlayExtender behaviour and promptly forgotten all about it. Of course when I recreated my site based on a different CSS layout the behaviour re-appeared and I had one of those "Oh, I remember this driving me nuts before and spending a load of time fixing it all of which I've now undone" moments. Anyway, I've mailed the relevant folks to see whether it's just me or there really is an issue.
Anyone else seen this behaviour? Got a workaround for me? Point out the flaw(s) in my CSS? Please?