表格的拖拽功能

时间：2014-02-22 03:38:53 阅读：356 评论：0 收藏：0 [点我收藏+]

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

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

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

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

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

组装后，界面效果如下：

bubuko.com,布布扣

主界面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;
}

表格的拖拽功能

原文：http://www.cnblogs.com/Eastsong/p/3559633.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)