Brendan Tompkins [MVP]

Sponsors

The Lounge

News

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Sticky Draggable Divs
OBSOLETE CONTENT
The author of this post has determined that this content is obsolete. Use at your own risk! Blog posts are a point-in-time snapshot of the blogger's thinking and should not be assumed to represent this blogger's current opinions. This post was left up for historical purposes.

If you do Web Application development, you've no doubt struggled with the task of creating Modal forms.  You have different options for doing this, each with their own advantages and pitfalls.  Hosting your form in a new browser instance (window.open()) is really a kludge, and many users have popup blocking software which will break this approach. Using true Modal dialogs (window.showModalDialog()) doesn't work well from within ASP.NET.   Using draggable DIV elements solves some of these issues, but has its own set of problems.  Dragging DIV elements involves using DHTML and JavaScript and the script that you have to write to enable this can be tricky.  Toss browsers other than IE into the mix, and you've got even more problems.

Taking all this into account, I've come up with an approach that works pretty well from within ASP.NET applications.  Sticky Draggable Divs! (SDDs) ;)  They involve using DHTML Behaviors, and .htc files. If you're not familiar with this technology, see http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp

So, check out my example of SDDs.  I've included the source files in a .zip file here.

Creating SDD's is easy! Just follow these steps: 

  1. Create an ABSOLUTELY positionable DIV element
  2. Reference the DragParent.htc file
  3. Include the DragParent namespace in the page's HTML element.  
  4. Wrap an element within <DragParent:DragParentDiv> tags

Any element included within the <DragParent:DragParentDiv> tags will become the anchor to enable dragging of that element's parent DIV control.  Within the .htc file, events are attached to the element to support the dragging.  When the dragging is complete, a cookie is set so that the element will be positioned properly for postbacks. This is also done automatically for you by the .htc file.

For this to work well, and for the windows to be Draggable, your users have to be using Internet Explorer 5 or above.  I can count on most of my users to be using IE.  Mozilla users won't be able to drag the window, but this is okay since they can still see the content.  The best part is that these nerds won't get JavaScript errors, because Mozilla won't parse the HTC script. 

-Brendan


Posted 01-14-2004 2:12 PM by Brendan Tompkins

[Advertisement]

Comments

Mike wrote re: Sticky Draggable Divs
on 01-15-2004 12:47 AM
Cool ... but check out http://www.stedy.com
Darrell wrote re: Sticky Draggable Divs
on 01-15-2004 12:55 AM
As a follow-on, you could create Sticky Transparent Divs (STDs), though I'm not sure many people would want to try that out.
Brendan Tompkins wrote re: Sticky Draggable Divs
on 01-15-2004 1:20 AM
Darrell, Somtimes you end up with Sticky Transparent Divs without even trying. These can be difficult to get rid of, and will not go away on their own. If you end up with one, make sure that you remove the background:transparent tag from the style.
Brendan Tompkins wrote re: Sticky Draggable Divs
on 01-15-2004 1:23 AM
Mike.. Thanks for the link! That stedy site is very cool!
Codo wrote re: Sticky Draggable Divs
on 12-10-2004 12:58 AM
[quote]"The best part is that these nerds"[/quote]

bog off
Baqai wrote re: Sticky Draggable Divs
on 01-05-2005 8:57 PM
Nice man... but theres a small bug in it.. if i have multiple frame or a flash object, it gets behind it....
One solution could be using window.createPopup() object to display a sort of a popup... but then i dont know how to make it moveable
CodeBetter.Com Link Blog wrote An ASP.NET Modal Panel Control
on 08-22-2005 10:33 AM
One UI element that has always been tricky to create in ASP.NET applications is the Modal Window.&amp;nbsp;...
CodeBetter.Com Link Blog wrote An ASP.NET Modal Panel Control
on 08-22-2005 10:34 AM
One UI element that has always been tricky to create in ASP.NET applications is the Modal Window.&amp;nbsp;...
Brendan Tompkins wrote An ASP.NET Modal Panel Control
on 08-22-2005 10:54 AM
One UI element that has always been tricky to create in ASP.NET applications is the Modal Window.&amp;nbsp;...
Brendan Tompkins wrote An ASP.NET Modal Panel Control
on 08-22-2005 11:01 AM
One UI element that has always been tricky to create in ASP.NET
applications is the Modal Window.&amp;nbsp;...
Brendan Tompkins wrote An ASP.NET Modal Panel Control
on 08-22-2005 11:12 AM
One UI element that has always been tricky to create in ASP.NET
applications is the Modal Window.&amp;nbsp;...
Brendan Tompkins wrote An ASP.NET Modal Panel Control
on 08-22-2005 3:37 PM
One UI element that has always been tricky to create in ASP.NET
applications is the Modal Window.&amp;nbsp;...
yoganand wrote re: Sticky Draggable Divs
on 12-05-2006 4:12 AM

hi i am not able download ur example

pls help

thanks in advance

Regards

Yoganand.

Braxism wrote re: Sticky Draggable Divs
on 02-10-2007 8:08 AM

yehforgames.com is a good wow powerleveling pvp service

Frances wrote re: Sticky Draggable Divs
on 02-10-2007 8:10 AM

<a href="http://www.yehforgames.com">wow pvp powerleveling honor</a>

Joice wrote re: Sticky Draggable Divs
on 02-10-2007 8:11 AM

http://www.yehforgames.com  wow powerleveling pvp honor world of warcraft

Tom wrote re: Sticky Draggable Divs
on 03-14-2007 4:09 PM
yehforgames.com suck they never respond to my AIM and there email box is allways full. I been stuck on level 26 for over 30 hours.

Add a Comment

(required)  
(optional)
(required)  
Remember Me?