实现了如图效果
完整代码如下所述
<!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的树形图拖拽效果: