实现了如图效果

完整代码如下所述

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css">   
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery-2.1.1.js"></script>   
<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>    
<style>
.left{
            width:120px;
            float:left;
        }
        .left table{
            background:#E0ECFF;
        }
        .left td{
            background:#eee;
        }
        .right{
            
            width:570px;
        }
        .right table{
            background:#D6DDEF;
            width:100%;
        }
        .right td{
            background:#fafafa;
            color:#444;
            text-align:center;
            padding:2px;
        }
        .right td{
            background:#E0ECFF;
        }
        .right td.drop{
            background:#fafafa;
            width:100px;
        }
        .right td.over{
            background:#8AC534;
        }
        .item{
            text-align:center;
            border:1px solid #499B33;
            background:#fafafa;
            color:#444;
            width:100px;
        }
        .assigned{
            border:1px solid pink;
        }
        .trash{
            background-color:red;
        }
        

</style>

<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
    $('.left .tree-title').draggable({  //使用$.fn.draggable.defaults重写默认值对象
        revert:true,  //拖动停止时元素将返回起始位置
        proxy:'clone' //在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素
    });
    $('.right td.drop').droppable({ //通过标签创建一个放置区
        onDragEnter:function(){  //在被拖拽元素到放置区内的时候触发
            $(this).addClass('over');
        },
        onDragLeave:function(){
            $(this).removeClass('over');
        },
        onDrop:function(e,source){   //在被拖拽元素放入到放置区的时候触发
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')){
                $(this).append(source);
            } else {
                var c = $(source).clone().addClass('assigned');
                $(this).empty().append(c);
                c.draggable({
                    revert:true //如果设置为true,在拖动停止时元素将返回起始位置。
                });
            }
        }
    });
    $('.left').droppable({
        accept:'.assigned',   //确定哪些可拖拽元素将被接受
        onDragEnter:function(e,source){ //在被拖拽元素到放置区内的时候触发
            $(source).addClass('trash');
        },
        onDragLeave:function(e,source){
            $(source).removeClass('trash');
        },
        onDrop:function(e,source){
            $(source).remove();
        }
    });
});
</script>
</head>
<body>
<div class="left">
<ul id="tt" class="easyui-tree">   
    <li><span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li><span><a href="#">File 11</a></span>   </li>   
                    <li><span>File 12</span></li>   
                    <li><span>File 13</span></li>   
                </ul>   
            </li>   
            <li><span>File 2</span></li>   
            <li><span>File 3</span></li>   
        </ul>   
    </li>   
    <li><span>File21</span></li>   
</ul>  
</div>
<div class="right">
            <table>
                <tr>
                    <td class="title">行</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
                <tr>
                    <td class="title">列</td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                    <td class="drop"></td>
                </tr>
</table>  
</div>
</body>
</html>

下面研究一下关于Ext的树形图拖拽效果: