Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts

    jQuery Draggable Issue

    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...
    Code:
    <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.
    Last edited by wldrumstcs; 11-08-2010 at 09:13 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Looks like the draggable cancel option allows this, so if your html is something like:

    Code:
    <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

    Code:
    	$('#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.

  • Users who have thanked SB65 for this post:

    wldrumstcs (11-08-2010)

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    169
    Thanks
    26
    Thanked 3 Times in 3 Posts
    That works.

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •