jquery easyui 多屋拖放问题

如下图：请教大家如何实现先把A拖放到右边的DIV里。再把B拖到A中。把C拖到B中
<!DOCTYPE html>  
<html>  
<head>  
    
    <title>Basic Droppable - jQuery EasyUI Demo</title>  
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>   <style type="text/css">  
        .title{  
            margin-bottom:10px;  
        }  
        .dragitem{  
            border:1px solid #ccc;  
            width:50px;  
            height:50px;  
            margin-bottom:10px;  
        }  
        .targetarea{  
            border:1px solid red;  
            width: 230px; height: 120px; padding: 10px; float: left; margin: 0px; 
        }  
.targetarea1{  
            border:1px solid gray ; width:  130px;
            height:50px;  
        }  
.over{
background:#FBEC88;
}
        .proxy{  
            border:1px solid #ccc;  
            width:80px;  
            background:#fafafa;  
        }  
    </style>  
    <script>  
        $(function(){  
            $('.dragitem').draggable({  
                revert:true,  
                deltaX:10,  
                deltaY:10,  
                proxy:function(source){  
                    var n = $('<div class="proxy"></div>');  
                    n.html($(source).html()).appendTo('body');  
                    return n;  
                }  
            }); 
$('.drop').droppable({
onDragEnter:function(e,source){  
$(this).addClass('over');
                    },  
                    onDragLeave: function(e,source){  
                      $(this).removeClass('over');
                    },  
                    onDrop: function(e,source){
$(this).removeClass('over');
$(this).append(source);
                    }  
});
        });  
    </script>  
</head>  
<body>  
    <h2>Droppable</h2>  
    <div class="demo-info">  
        <div class="demo-tip icon-tip"></div>  
        <div>请教大家如何实现先把A拖放到右边的DIV里。再把B拖到A中。把C拖到B中</div>  
    </div>  
    <div style="margin:10px 0;"></div>  
    <div style="float:left;width:200px;margin-right:20px;">  
        <div class="title">Source</div>  
        <div>  
            <div class="dragitem">a</div>  
            <div class="dragitem">b</div>  
            <div class="dragitem">c</div>  
        </div>  
    </div>  
    <div style="float:left;width:200px;">  
        <div class="title">Target</div>  
        <div class="targetarea drop"> </div>  
    </div>  
    <div style="clear:both"></div>  
  
</body>  
</html> jqueryeasyuidroppable