拖拽
<code class="language-html"><!DOCTYPE HTML> <html> <head> <title>EasyUI拖放</title> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 1em; vertical-align: middle; font-weight: normal } </style> </head> <body> <div style="float:left;width:100px;"> <table style="background:#E0ECFF;"> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"><div class="item">关键词1</div></td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"><div class="item">关键词1</div></td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"><div class="item">关键词1</div></td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"><div class="item">关键词1</div></td> </tr> </table> </div> <div style="float:left;width:100px;height:1px;"></div> <!--间隔--> <div style="float:left;width:800px;"> <table style="background:#E0ECFF;"> <tr> <td style="width:100px;text-align:center;">标题</td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> </tr> </table> </div> </body> <script> $(function(){ var background = '#fafafa';//背景色 var overBackground = '#FBEC88';//经过背景色 $('.drop').css('background',background); $('.draggable').draggable({ revert:true,//停止返回原位置 proxy:'clone'//克隆形式进行拖拽 }); $('.drop').droppable({ onDragOver:function(e,source){ $(this).css('background',overBackground);//经过变色 }, onDragLeave:function(e,source){ $(this).css('background',background);//离开还原 }, onDrop:function(e,source){ var t = $(this); t.css('background',background);//停止还原 //复制元素 var c = $(source).clone(); t.empty().append(c); //可拖拽 c.draggable({ revert:true,//停止返回原位置 onStopDrag:function(e){ t.empty();//拖离删除 } }); } }); }); </script> </html> </code> <code class="language-html"><!DOCTYPE HTML> <html> <head> <title>EasyUI拖放</title> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 1em; vertical-align: middle; font-weight: normal } </style> </head> <body> <div style="float:left;width:100px;"> <table style="background:#E0ECFF;"> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"> <div class="item">关键词1</div> </td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"> <div class="item">关键词2</div> </td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"> <div class="item">关键词3</div> </td> </tr> <tr> <td class="draggable" style="width:100px;background:#eee;text-align:center;border:1px solid #499B33;"> <div class="item">关键词4</div> </td> </tr> </table> </div> <div style="float:left;width:100px;height:1px;"></div><!--间隔--> <div style="float:left;width:800px;"> <table style="background:#E0ECFF;"> <tr> <td style="width:100px;text-align:center;">标题</td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> <td class="drop" style="width:100px;text-align:center;"></td> </tr> </table> </div> </body> <script> $(function(){ var background = '#fafafa';//背景色 var overBackground = '#FBEC88';//经过背景色 $('.drop').css('background',background); $('.draggable').draggable({ revert:true,//停止返回原位置 proxy:'clone'//克隆形式进行拖拽 }); $('.drop').droppable({ onDragOver:function(e,source){ $(this).css('background',overBackground);//经过变色 }, onDragLeave:function(e,source){ $(this).css('background',background);//离开还原 }, onDrop:function(e,source){ var t = $(this); t.css('background',background);//停止还原 //$(source).remove(); //删除原本的 //复制元素 var c = $(source).clone(); $(source).hide(); t.empty().append(c); //可拖拽 c.draggable({ revert:true,//停止返回原位置 onStopDrag:function(e){ // t.empty();//拖离删除 //t.empty().append(c); $(source).show(); } }); } }); }); </script> </html> </code>