table的拖拽选中区域(包含行合并和列合并的处理)
最近碰到一个表格的增删问题，一个主要的问题在于需要用鼠标拖拽去选中区域，然后对选中的区域进行操作。在网上找了些代码，做了个总结。原理是在鼠标刚开始点击的点和鼠标移动的点，两个点之间生成一个矩形，然后用这个矩形去和表格中的td进行碰撞检测，但是因为是表格，当然会有行合并和列合并的问题。我的思路是使用递归函数，在每一次矩形和表格碰撞完之后，重新改变矩形的定位和宽高，然后再进行碰撞检测，直到达到某个条件时，停止。我在每个和矩形块碰撞到的td上加了一个class(grayColor),然后循环遍历，需要取到4个值，最小的距离上边框的距离(offset().top)、最大的距离上边框的距离(offset().top+outerHeight())、最小的距离左边框的距离(offset().left)、最大的距离左边框的距离(offset().left+outerWidth),然后对矩形块更新，宽度为最大距离左边框的距离减去最小的距离，高度同理，top值为最小的距离上边框的值，left值同理，然后再去和table内的td去做碰撞检测，直到后一次和前一次的所有距离相等，即两次的最小距离上边框的值、最大距离上边框的值、最小距离左边框的值、最大距离左边框的值都相等时，函数停止执行。这样做的好处是，不需要去考虑colspan的值和rowspan的值，反正我找的用colspan和rowspan的做处理的，我没有看懂，毕竟，我是一只小菜鸟。下面贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 200px;
height: 50px;
border: 1px solid #D9D9D9;
}
.grayColor {
background: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script src="jquery.min.js"></script>
<script>
$('table').on('mousedown', 'td', function(e) {
$('.grayColor').removeClass('grayColor');
var startLeft = e.clientX;
var startTop = e.clientY;
var thatTd_ = $(this);
$(document).on('mousemove', function(e) {
var moveLeft = e.clientX;
var moveTop = e.clientY;
// 动态生成选择区域时占位的碰撞检测块
crashPlaceholder(moveLeft, moveTop, startLeft, startTop);
// 元素碰撞检测
elementCrash();
// 处理有表格合并之后的的选择问题 通过检测高度来实现效果
formMergeChoice(moveLeft, moveTop)
});
e.stopPropagation();
})
// 鼠标抬起事件
$(document).on('mouseup', function(e) {
$(document).unbind('mousemove');
$('.show').remove();
e.stopPropagation();
});
// 生成占位块
function crashPlaceholder(A, B, C, D) {
// 开始的行列
var a = A > C ? C : A;
var b = B > D ? D : B;
$('.show').remove();
$('body').append('<div class="show"></div>');
$('.show').css('width', Math.abs(A - C)).css('height', Math.abs(B - D)).css('position', 'fixed').css('left', a).css(
'top', b).css('border', '1px dotted black');
}
// 碰撞检测
function elementCrash() {
$('table td').each(function() {
$(this).removeClass('grayColor');
// 碰撞检测
var t1 = $(this).offset().top;
var l1 = $(this).offset().left;
var r1 = $(this).offset().left + $(this).innerWidth();
var b1 = $(this).offset().top + $(this).innerHeight();
var t2 = $('.show').offset().top;
var l2 = $('.show').offset().left;
var r2 = $('.show').offset().left + $('.show').innerWidth();
var b2 = $('.show').offset().top + $('.show').innerHeight();
if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) {
$(this).removeClass('grayColor');
} else {
$(this).addClass('grayColor');
}
})
}
// 处理有表格合并之后的的选择问题 通过检测高度来实现效果
function formMergeChoice() {
var heightArr = [],
heightArr1 = [],
widthArr = [],
widthArr1 = [];
$('.grayColor').each(function() {
heightArr.push($(this).offset().top);
heightArr1.push($(this).offset().top + $(this).outerHeight());
widthArr.push($(this).offset().left);
widthArr1.push($(this).offset().left + $(this).outerWidth());
})
var minHeight = Math.min.apply(null, heightArr);
var maxHeight = Math.max.apply(null, heightArr1);
var minWidth = Math.min.apply(null, widthArr);
var maxWidth = Math.max.apply(null, widthArr1);
$('.show').outerHeight(maxHeight - minHeight - 3).outerWidth(maxWidth - minWidth).css('top', minHeight).css('left', minWidth);
// 当改变碰撞占位检测块之后的高度和定位之后 再次进行碰撞检测
elementCrash();
$('.grayColor').each(function() {
heightArr.push($(this).offset().top);
heightArr1.push($(this).offset().top + $(this).outerHeight());
widthArr.push($(this).offset().left);
widthArr1.push($(this).offset().left + $(this).outerWidth());
})
var minHeight1 = Math.min.apply(null, heightArr);
var maxHeight1 = Math.max.apply(null, heightArr1);
var minWidth1 = Math.min.apply(null, widthArr);
var maxWidth1 = Math.max.apply(null, widthArr1);
// 递归函数
if (minHeight == minHeight1 && maxHeight == maxHeight1 && minWidth == minWidth1 && maxWidth == maxWidth1) {
return;
} else {
formMergeChoice();
}
}
</script>
</html>
