...

View Full Version : Resolved jQuery Draggable Issue



wldrumstcs
11-08-2010, 04:26 PM
I am recreating a Windows form. In it, I have a div that appears as a dialog. In this div is a title div that appears like a title bar would on a Windows form. Here's what I mean...


<div id="windows_form" style="position: relative;">
<div id="windows_title" style="background-color: 0000FF;position: absolute;top: 0;left: 0;">
Here's the title
</div>
</div>


I want to the user to be able to drag "windows_form" by dragging "windows_title". In other words, when the user drags "windows_title", they are really dragging its parent ("windows_form"). Adding .draggable(); to "windows_title" obviously doesn't accomplish this. Instead, it only drags "windows_title". Is what I'm trying to do even possible?

Thanks!

EDIT: There is an easier way to do this... Use the jQuery "handle" option for the "draggable" event.

SB65
11-08-2010, 05:26 PM
Is there any reason not to just make #windows-form draggable? You could emphasise the draggability of the title bar by changing the cursor over #windows-title.

wldrumstcs
11-08-2010, 05:29 PM
There is not reason I couldn't do this. However, with Windows, you can only drag the form from the title bar. If possible, I would like to replicate this.

SB65
11-08-2010, 05:57 PM
Looks like the draggable cancel option allows this, so if your html is something like:


<div id="windows_form" style="position: relative;">
<div id="windows_title" style="background-color: 0000FF;position: absolute;top: 0;left: 0;">
Here's the title
</div>
<div id="windows-content">Content here</div>
</div>

then


$('#windows_holder').draggable({cancel:'#windows_content'});


makes the window draggable but not by the #windows_content element, which I think is close to what you want.

wldrumstcs
11-08-2010, 06:24 PM
That works.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum