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?
