表格的拖拽功能

codingker

2014-02-20

关注关注

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

代码打包见附件

html表格

安科网

表格的拖拽功能

codingker

codingker

相关推荐

js实现表格单列按字母排序

js实现表格数据搜索

表格标签的使用

HTML5标签2

Asp.net Form 动态产生表格核心后台代码

HTML-表格

html学习

通过css润色html表格

html table表格斜线表头的实现方法总汇

2020/6/3 JS 对表格元素进行增删改操作和事件监听

html table表格标签内容如何居中显示？表格的align属性的用法介绍

基于JavaScript实现表格隔行换色

HTML <thead> 标签

HTML <tfoot> 标签

HTML <tbody> 标签

HTML表单

el-table 表格循环多张图片

html表格显示

demo48-表格标签

demo49-表格合并

codingker