Drag & Drop involving accordion panes (VB/ASP)

Question

Hello all, I have an accordion control in ASP 3.5, with multiple accordion panes. For the sake of simplicity, I will only focus on one pane as the problem is pane specific. Using JQuery, I created a draggable function and applied it to my .drag cssclass. On Page_Load, I create a bunch of image objects and assign that class to them, in addition to an image. Once I load the page, I can drag all the images around as intended. What I can't do, however, is drag those images outside of the accordion panel they were created in! Is there a way around that? I tried using this, but to no avail:

 <script type="text/javascript">
    $(function() {
    $(".drag").draggable({ containment: 'document' });
    });
</script>

Is there something in the actual aspx page that I should be focusing on? I'm adding the images to a panel in my accordion pane, and it looks like this:

<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> Chassis</Header>
<Content>
<asp:Panel ID="ChassisPanel" runat="server">
</asp:Panel>
</Content>
</ajaxToolkit:AccordionPane>

I appreciate any guidance!

Answer 1

Have you tested this in multiple browsers? Sounds to me like an issue I had with IE. Perhaps adding a large Z-Index value to your .drag class in CSS would help.

Answer 2

All I had to do was add the clone helper, then anything I drag is able escape its parent container. This is how I updated my drag line and now it works:

 $('.drag').draggable({ revert: true,helper: 'clone' });}

Now for the life I me I can't figure out the droppable bit :)