Draggable nested inside Draggable drags both when dragging child in IE
Hi,
I'm building a seating application using jQuery. I have tables with chairs around them, which may have guests seated at the chairs. Each table has a wrapper div which is draggable. Inside the table are any number of chair div's. Inside any chair div a guest div may be seated. Here is a sample of the markup for one such table. This table has 8 chairs with two guests seated at the first two chairs.
- <div id="table-wrapper-1" class="table-wrapper table-type-0 ui-draggable">
<div id="table-1" class="seating-table">
<div class="seating-table-name">Table 1</div>
</div>
<div id="chair-1-0" class="chair chair-pos-0 table-chair-1">
<div title="Jerry Seinfeld" id="guest-2-5-1" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-1" class="chair chair-pos-1 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-2" class="chair chair-pos-2 table-chair-1"></div>
<div id="chair-1-3" class="chair chair-pos-3 table-chair-1"></div>
<div id="chair-1-4" class="chair chair-pos-4 table-chair-1"></div>
<div id="chair-1-5" class="chair chair-pos-5 table-chair-1"></div>
<div id="chair-1-6" class="chair chair-pos-6 table-chair-1"></div>
<div id="chair-1-7" class="chair chair-pos-7 table-chair-1"></div>
</div>
The div.table-wrapper is a draggable and so are the div.guest's. The idea is that you can drag a guest from one chair to another (chair's are droppable's), or drag the entire table to a different location. The problem I am having is in IE, where if you click and drag a guest, both the guest and the table drag at the same time, it works fine in Firefox 3.6. Does anyone know how I can fix that, or at least where to start looking?
Thanks,
~Matt