1:
2:
3: <div style="height: 550px;">
4:
5: <p><b>This draggable Image will be ghosted with a special CssClass and is dragged at the document
6: level, circumventing overflow and stacking contexts. When <gaia:Label ID="zGhostLabel1" Text="Dropped" runat="server"></gaia:Label>, it will be
7: reverted back to its original location and the ghost is removed.
8: </b></p>
9: <gaia:Image ID="zGhostImage1" runat="server" />
10:
11: <br />
12: <hr />
13: <p><b>This draggable Image is ghosted with shallow copy and a special CssClass with some
14: opacity applied. The Aspect is attached to a surrounding panel to properly copy only the
15: root element. The ghost is immediately reverted on <gaia:Label ID="zGhostLabel2" Text="drop" runat="server"></gaia:Label>.
16: </b></p>
17: <gaia:Panel
18: ID="zGhostPanel" runat="server" Width="115" Height="86">
19: <gaia:Image ID="zGhostImage2" runat="server" />
20: </gaia:Panel>
21: <br />
22: <br />
23: <br />
24: <hr />
25: <p><b>This draggable is ghosted during drag, but will not revert after drop. If <gaia:Label ID="zGhostLabel3" Text="dropped" runat="server"></gaia:Label> outside
26: it's container, the image will be hidden because of it's parent overflow. This is something
27: you need to take into consideration when designing your applications.
28: </b></p>
29: <gaia:Image ID="zGhostImage3" runat="server" />
30:
31: </div>
32:
33:
34: