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();
}
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;
}
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;
}
代码打包见附件