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 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?

Technorati tags: , ,

Comments (3)
  1. Garry Trinder says:

    Hi Mike,

    I played with the DragOverlayExtender awhile back and haven’t seen this behavior.  You can see my example here:

    Like you said, the problem is that you have your container div as "position: relative" in the css.  With that style, any absolutely positioned element within the container will be relative to that container.  From your example, it seems like the DragOverlayExtender does not play nice with relatively postioned elements. One solution is to change your layout so that you do not need the container div to be relative.

    A better solution is to move the container that is drag-able panel (P1 in your example) outside of the relatively positioned element :-).  If you need to still place your draggable panel, you can absolutely position it with CSS.

    Hope this helps,


  2. Garry Trinder says:

    Very odd, I could have sworn I replied to this post this morning.  Oh well, the gist of my comment was to move your Draggable panel outside of the relatively positioned container div.

  3. MikeO [MSFT] says:

    Hi Alan

    Sorry – I have comment moderation turned on to avoid spamming so it sometimes takes me a little while to approve.

    Thanks for your comments and I can see that would be a workaround. Unfortunately, in my "real" site, the element that’s relatively positioned is set in my master page and contains my content placeholder so there’s no way for me to move the panel outside the container (not without either changing my master page layout – which is back where I started before my "re-design" – why did I touch it in the first place :-)) or removing that page from the master page hierarchy.

    I certainly think there’s something in DragOverlayExtender that’s not playing well with relatively positioned elements. Given a bit more time I’ll maybe dig a bit deeper but I thought there might be some "hack" I could perform within the constraints of the current layout…. I think I’m perhaps being too optimistic though 🙂

Comments are closed.

Skip to main content