表格的拖拽功能
html5已将拖放做为功能的一部分，任何元素都可以拖放。此处已表格为例，纯属练习用。
由于本人是做电信行业的，这个例子中的数据也以电信行业产品作为数据。
【功能】1 实现资费、优惠元素组装成包（将资费控件、优惠控件拖放到资费包、优惠包上）
2 实现将资费包、优惠包拖放到产品上
注：资费控件、优惠控件、资费包、优惠包、产品在界面上都是以表格形式展示的。
组装后，界面效果如下：
主界面html如下：
<html> <head> <style type="text/css"></style> <link rel="stylesheet" type="text/css" href="table_drag.css"></link> <title>table_drag</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Drag.js"></script> </head> <body> <div>你可以将资费、优惠拖拽到资费包、优惠包上，看看效果； 拖拽资费包、优惠包到你喜欢的位置。在尝试下将包拖拽到产品上！！！</div> <div id ="sidebar"> <div class="favor_module_wrapper"> <table class="module" id="favor_module"> <tr> <th>优惠 </th> </tr> </table> </div> <div class="discnt_module_wrapper"> <table class="module" id="discnt_module"> <tr> <th>资费 </th> </tr> </table> </div> <div class="other"></div> </div> <div> <table class="control" > <thead> <tr> <th>GPRS优惠包 </th> </tr> </thead> <tbody > <tr class="tbr"> <td>10元GPRS</input> </td> </tr > <tr class="tbr"> <td>20元GPRS </td> </tr> <tr class="tbr"> <td>30元GPRS </td> </tr> </tbody> </table> </div> <div> <table class="control"> <thead> <tr> <th>短信包优惠包 </th> </tr> </thead> <tbody > <tr class="tbr"> <td>短信10元 </td> </tr > <tr class="tbr"> <td>短信20元 </td> </tr> <tr class="tbr"> <td>短信30元 </td> </tr> </tbody> </table> </div> <div> <table class="control"> <thead> <tr> <th>66元3G主资费包 </th> </tr> </thead> <tbody > <tr > <td>66元3G主资费 </td> </tr > </tbody> </table> </div> <div> <table class="product"> <thead> <tr> <th> 66元3G套餐 </th> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> </div> </body> </html>
Drag.js 代码如下：
$(document).ready(function() { var m_drag = new Drag(1,7); }); //oh 是否只能拖动head //max_row 表格存在row行后，出现滚动条 function Drag(oh,max_row) { var _this=this; var rect={ x:0, y:0, width:0, height:0 }; var m_p = { x:0, y:0 }; var m_onlyhead; var m_row; var init=function() { m_onlyhead = oh; m_row = max_row; $(".module ,.control,.product").attr("draggable","true"); $(".module ,.control,.product").bind({ dragstart:dragstart, dragend:dragend }); }; var getTablePosition = function(obj) { var t_rect={ x:0, y:0, width:0, height:0 }; t_rect.x=obj.getBoundingClientRect().left; t_rect.y=obj.getBoundingClientRect().top; t_rect.width=obj.getBoundingClientRect().right - obj.getBoundingClientRect().left; t_rect.height=obj.getBoundingClientRect().bottom - obj.getBoundingClientRect().top; return t_rect; }; var dragstart = function (e) { console.log("dragstart"); var obj = this; rect =getTablePosition(obj); console.log("rect=("+rect.x +"," + rect.y+"," +rect.width+","+rect.height+")"); //如果仅仅拖动head的时候，才允许拖动 if(1==m_onlyhead){ var f = e.originalEvent; var obj_head=this.tHead; if (obj_head) { var f = e.originalEvent; m_p = getMousePoint(f); var head_rect = getTablePosition(obj_head); console.log("head_rect=("+head_rect.x +"," + head_rect.y+"," +head_rect.width+","+head_rect.height+")"); var is_on = is_inRect(m_p,head_rect) if(1 != is_on) { f.preventDefault(); } } } }; var dragend = function (e) { console.log("dragend"); console.log(this); var f = e.originalEvent; m_p = getMousePoint(f); var obj = this; rect = getTablePosition(obj); rect.x=m_p.x; rect.y=m_p.y; rect.width=m_p.x+rect.width; rect.height=m_p.y+rect.height; console.log("rect=("+rect.x +"," + rect.y+"," +rect.width+","+rect.height+")"); console.log(this.clientLeft,this.clientTop); $(obj).not(".module").css({"position":"absolute","left": rect.x+"px" ,"top":rect.y+"px"}); if ( "product"==$(obj).attr("class") ) { return; } if( "control"==$(obj).attr("class") ) { $(".product").each(function(){ var p_tt_rect =getTablePosition(this); var p_is_on = is_inRect(m_p,p_tt_rect) if(1 == p_is_on) { console.log(p_is_on); m_cols = $(this).find("tbody").first().find("tr").first().children("td").size()+1; $(this).first("thead").find("th").attr("colspan",m_cols); var p_str_html = $(obj).html(); if(1==m_cols) { $(this).find("tbody").first().find("tr").first().html("<td><table>"+p_str_html+"</table></td>"); } else { $(this).find("tbody").first().find("tr").first().children("td").last().after("<td><table>"+p_str_html+"</table></td>"); } $(obj).remove(); } }); } $(".control").each(function(){ if (obj == this) { return ; } var tt_rect =getTablePosition(this); var is_on = is_inRect(m_p,tt_rect) if(1 == is_on) { var str_html="<tr><td width='40' height='20'><input type='text' "; var co = $(obj).css("background-color"); if (co) { str_html = str_html +"style=" +"'background-color:"+co +"'"; } var obj_id = $(obj).attr("id"); if("favor_module" == obj_id) { str_html = str_html + "placeholder='请输入优惠名称' "; } else if("discnt_module" == obj_id ) { str_html = str_html + "placeholder='请输入资费名称' "; } str_html = str_html + "></input></td></tr>"; $(this).find("tr").last().after(str_html); if (m_row <= $(this).find("tbody").find("tr").size() ) { console.log($(this).find("tr")); var v_obj = $(this).find("tr"); var v_h = getRowHeight(v_obj, m_row); $(this).find("tbody").css({"height": v_h,"overflow-y":"auto"} ); } } }); }; var getRowHeight= function( obj , r) { var h=0; var o; var i=0; o=obj.toArray(); while(i <r) { h = h + o[i].clientHeight; i = i+1; } return h; } var getMousePoint= function (ev) { var point = { x:0, y:0 }; // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 if(typeof window.pageYOffset != 'undefined') { point.x = window.pageXOffset; point.y = window.pageYOffset; } // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离 // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { point.x = document.documentElement.scrollLeft; point.y = document.documentElement.scrollTop; } // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度 else if(typeof document.body != 'undefined') { point.x = document.body.scrollLeft; point.y = document.body.scrollTop; } // 加上鼠标在视窗中的位置 point.x += ev.clientX; point.y += ev.clientY; // 返回鼠标在视窗中的位置 return point; }; var is_inRect = function (m_point,rect) { if ( ( rect.x <= m_point.x ) && ( m_point.x <= rect.x + rect.width ) && ( rect.y <= m_point.y ) && ( m_point.y <= rect.y + rect.height ) ) return 1; else return 0; }; init(); }
table_drag.css 代码如下：
* { margin:0; padding:0; } #sidebar { width: 20%; } #sidebar .other{ float:right; width: 20%; } table.control{ border: 2px,solid,black; border-collapse:collapse; } table.module{ border-style: solid; border-width: 2px; } #favor_module { background-color:blue; } #discnt_module { background-color:yellow; } table thead{ background-color: gray; color:white; } table tbody{ font-style:italic; text-align:center; } table tbody tr td { border-style: solid; border-width: 1px; } table td input { text-align:center; } .product { background-color:red; }
