html5已将拖放做为功能的一部分，任何元素都可以拖放。此处已表格为例，纯属练习用。

        由于本人是做电信行业的，这个例子中的数据也以电信行业产品作为数据。

 【功能】1  实现资费、优惠元素组装成包（将资费控件、优惠控件拖放到资费包、优惠包上）

               2 实现将资费包、优惠包拖放到产品上

              注：资费控件、优惠控件、资费包、优惠包、产品在界面上都是以表格形式展示的。

               

组装后，界面效果如下：

主界面html如下：

     
     
      你可以将资费、优惠拖拽到资费包、优惠包上，看看效果；拖拽资费包、优惠包到你喜欢的位置。在尝试下将包拖拽到产品上！！！
     
     
    
      
        
       
优惠 
    
      
        
      
        
       
资费 
    
      
        
      
     
     
    
      
GPRS优惠包                
10元GPRS                
20元GPRS                
30元GPRS                
     
     
    
      
短信包优惠包                
短信10元                
短信20元                
短信30元                
     
     
    
      
66元3G主资费包                
66元3G主资费                
     
     
    
      
                66元3G套餐                                
     

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("
     
      "+p_str_html+"
");}else{$(this).find("tbody").first().find("tr").first().children("td").last().after("
     
      "+p_str_html+"
");}$(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="";$(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 

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;}