请教JQUERY UI 利用draggable+droppable实现一个这个效果怎么做

我先把代码贴近来<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
     <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.17.custom.min.js"></script>
     <script type="text/javascript">
         $(function () {
             $("#draggable .product").draggable({ revert: 'invalid', helper: 'clone'});
             $("#droppable").droppable({
                 tolerance: 'intersect',
                 hoverClass: 'ui-state-highlight',
                 greedy: true,
                 drop: function (event, ui) {
                    $(this).append('<div id=\'droppable\' class=\'ui-widget-content\'></div>');
                     $('#droppable .ui-widget-content').droppable({
                         tolerance: 'intersect',
                         hoverClass: 'ui-state-highlight',
                         greedy: true,
                         drop: function (event, ui) {
                             //$(this).append($(ui.draggable).clone())
                             $(this).append('<div id=\'droppable\' class=\'ui-widget-content\'></div>');
                         }
                     });                     
                     //$(this).append(ui.draggable);
                     //ui.draggable('option', 'revert', true);
                 }                
             });
         });     </script>
     <style type="text/css">
        #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
        #droppable { width: 60%; height: 100%; padding: 0.5em; float: left; margin: 10px; }        
        .ui-state-highlight{background: #88EE88;}
     </style>
</head>
<body>
    <div id="draggable" class="ui-widget-content">
        <img id="1b3" src="images/1b3.jpg"  class="product" alt="" title="" />
        <img id="1b3b1" src="images/1b3b1.jpg"       class="product" alt="" title="" />
        <img id="1b2b2" src="images/1b2b2.jpg"       class="product" alt="" title="" />
    </div>
 
    <div id="droppable" class="ui-widget-header">
       
    </div>
</body>
</html>效果就是从右边的DIV里往左边的DIV里拖拽并生成一个DIV，我想让生成的DIV里还可以拖动子DIV，无限分层，这个代码怎么写，我现在这里的代码至能支持到2层.