Bug Tracker

Ticket #2886: nested.html

File nested.html, 1.9 KB (added by michelled, 12 years ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5        <link rel="stylesheet" href="nested.css" type="text/css" />
6
7        <script type="text/javascript" src="../../../../fluid-components/js/jquery/jquery-1.2.6.js"></script>
8        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.core.js"></script>
9        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.draggable.js"></script>
10        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.droppable.js"></script>
11        <script type="text/javascript" src="nested.js"></script>
12
13                <title>Nested Test</title>
14        </head>
15        <body>
16          <h1> Nested Test </h1>
17      <p>
18          This is an example of using jQuery drag and drop in a nested context. This example does not use the Fluid Reorderer.
19      </p>
20          <div id="outer-container">
21            <h1>Container</h1>
22            This is the container. It is a droppable for the outer DnD.
23        <div id="outer-item1" class="outer-item">
24            <h1> Outer Item 1</h1>
25            This is a draggable and a droppable for the outer DnD.
26            It is also the container for the inner DnD.
27            <div id="inner-item1" class="inner-item">
28                <h1> Inner Item 1</h1>
29                This is a draggable and a droppable for the inner DnD.
30            </div>
31            <div id="inner-item2" class="inner-item">
32                <h1> Inner Item 2</h1>
33                This is a draggable and a droppable for the inner DnD.
34            </div>
35        </div>
36        <div id="outer-item2" class="outer-item">
37            <h1>Outer Item 2</h1>
38            This is a draggable and a droppable for the outer DnD.
39        </div>
40
41          </div> 
42     
43      <script type="text/javascript">
44          demo.initDnD();
45      </script> 
46        </body>
47</html>