Draggable has an option called 'handle' with which you can specify the
element that use used as the drag handle for the draggable.
So, something like this...
$("#wdw").draggable({handle:$(".title", this)})
...would make the element w/id "wdw" draggable, but only by the sub-
element w/a classname of "title".
On Aug 21, 11:41 am, Stephan <step...@ldstoolbar.com> wrote:
> Hi there,
>
> I am developing a web based desktop similar to eyeOS (google it to see
> more).
>
> I use jQuery to power the ajax part. Everything works great so far
> except that I have a little problem with the different windows (all
> div's) that I open. I made them draggable which works but they are
> draggable wherever I click. Now inside those divs I have some content
> like a titlebar with the name of the application and maximize,
> minimize and close buttons. I want it only to be draggable if someone
> clicks on the titlebar. Is this possible??
>
> Here is a sample structure of a div window.
> <div id="12" class="windowcase ui-resizable ui-draggable" style="left:
> 558px; top: 80px;">
> <table cellspacing="0" cellpadding="0" class="window">
> <tbody><tr class="narrowrow">
> <td class="narrowcol topleft"/>
> <td width="200" class="top"/>
> <td class="narrowcol bottomleft"/>
> </tr>
> <tr height="200">
> <td class="narrowcol left"/>
> <td id="12-content" class="window-content"><div
> class="windowtitle" id="12-title"><div style="float: left;">Process
> Manager</div><div class="windowicons" id="12-icons"><img
> onclick="closeWindow('12');" src="themes/default/minimizewindow.jpg"/><img
> onclick="closeWindow('12');" src="themes/default/
>
> closewindow.jpg"/></div></div><newdiv id="pro">
> <table cellspacing="0" border="1" style="font-size: 12px; width:
> 100%;">
> <tbody><tr><th>ID</th><th>Process Name</th><th>Action</th></tr>
> <tr><td>12</td><td>Process Manager</td><td style="padding-top: 4px;
> padding-bottom: 0px;"><img onclick="closeWindow(12);" src="themes/
> default/closewindow.jpg"/></td></tr></tbody></table>
>
> </newdiv></td>
> <td class="narrowcol right"/>
> </tr>
> <tr class="narrowrow">
> <td class="narrowcol bottomleft"/>
> <td class="bottom"/>
> <td class="narrowcol bottomright"/>
> </tr>
> </tbody></table>
> </div>
>
> So you see in this example I want to be able to drag the div with the
> id 12 only if someone clicks on the div 12-title.
>
> Is this possible?
