Bug Tracker

Ticket #2886: nested.html
File nested.html, 1.9 KB (added by michelled, September 08, 2008 03:29PM UTC)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="nested.css" type="text/css" />

        <script type="text/javascript" src="../../../../fluid-components/js/jquery/jquery-1.2.6.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.core.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.draggable.js"></script>
        <script type="text/javascript" src="../../../../fluid-components/js/jquery/ui.droppable.js"></script>
        <script type="text/javascript" src="nested.js"></script>

		<title>Nested Test</title>
	</head>
	<body>
	  <h1> Nested Test </h1>
      <p>
          This is an example of using jQuery drag and drop in a nested context. This example does not use the Fluid Reorderer. 
      </p>
	  <div id="outer-container">
	    <h1>Container</h1>
	    This is the container. It is a droppable for the outer DnD.
        <div id="outer-item1" class="outer-item">
            <h1> Outer Item 1</h1>
            This is a draggable and a droppable for the outer DnD.
            It is also the container for the inner DnD.
            <div id="inner-item1" class="inner-item">
                <h1> Inner Item 1</h1>
                This is a draggable and a droppable for the inner DnD.
            </div>
            <div id="inner-item2" class="inner-item">
                <h1> Inner Item 2</h1>
                This is a draggable and a droppable for the inner DnD.
            </div>
        </div>
        <div id="outer-item2" class="outer-item">
            <h1>Outer Item 2</h1>
            This is a draggable and a droppable for the outer DnD.
        </div>

	  </div> 
      
      <script type="text/javascript">
          demo.initDnD();
      </script>  
	</body>
</html>

Download in other formats:

Original Format