I am currently working on an implementation for selecting cells in a table. The challenge I am facing is that the cells in question can have a colspan or rowspan, which means that the selection is not restricted to a square or rectangular shape. For example, if you try selecting "1-3" and "2-3", it should also automatically select "1-4". I have reviewed a similar question on this topic, but so far, I have not been able to make any solution work. Do you have any insights on how this could be implemented?
Link: Access the Working Code
HTML
<table drag-select drag-select-ids="ids">
<tr>
<td id="td-1-1">1-1</td>
<td id="td-1-2">1-2</td>
<td id="td-1-3">1-3</td>
<td id="td-1-4">1-4</td>
</tr>
<tr>
<td id="td-2-1">2-1</td>
<td id="td-2-2">2-2</td>
<td id="td-2-3" colspan="2">2-3</td>
</tr>
<tr>
<td id="td-3-1">3-1</td>
<td id="td-3-2">3-2</td>
<td id="td-3-3">3-3</td>
<td id="td-3-4">3-4</td>
</tr>
<tr>
<td id="td-4-1">4-1</td>
<td id="td-4-2">4-2</td>
<td id="td-4-3">4-3</td>
<td id="td-4-4">4-4</td>
</tr>
</table>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.ids = [];
});
app.directive('dragSelect', function($window, $document) {
return {
scope: {
dragSelectIds: '='
},
controller: function($scope, $element) {
var cls = 'eng-selected-item';
var startCell = null;
var dragging = false;
function mouseUp(el) {
dragging = false;
}
function mouseDown(el) {
dragging = true;
setStartCell(el);
setEndCell(el);
}
function mouseEnter(el) {
if (!dragging) return;
setEndCell(el);
}
function setStartCell(el) {
startCell = el;
}
function setEndCell(el) {
$scope.dragSelectIds = [];
$element.find('td').removeClass(cls);
cellsBetween(startCell, el).each(function() {
var el = angular.element(this);
el.addClass(cls);
$scope.dragSelectIds.push(el.attr('id'));
});
}
function cellsBetween(start, end) {
var coordsStart = getCoords(start);
var coordsEnd = getCoords(end);
var topLeft = {
column: $window.Math.min(coordsStart.column, coordsEnd.column),
row: $window.Math.min(coordsStart.row, coordsEnd.row),
};
var bottomRight = {
column: $window.Math.max(coordsStart.column, coordsEnd.column),
row: $window.Math.max(coordsStart.row, coordsEnd.row),
};
return $element.find('td').filter(function() {
var el = angular.element(this);
var coords = getCoords(el);
return coords.column >= topLeft.column
&& coords.column <= bottomRight.column
&& coords.row >= topLeft.row
&& coords.row <= bottomRight.row;
});
}
function getCoords(cell) {
var row = cell.parents('row');
return {
column: cell[0].cellIndex,
row: cell.parent()[0].rowIndex
};
}
function wrap(fn) {
return function() {
var el = angular.element(this);
$scope.$apply(function() {
fn(el);
});
}
}
$element.delegate('td', 'mousedown', wrap(mouseDown));
$element.delegate('td', 'mouseenter', wrap(mouseEnter));
$document.delegate('body', 'mouseup', wrap(mouseUp));
}
}
});
CSS
[drag-select] {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[drag-select] .eng-selected-item {
background: blue;
color: white;
}
td {
padding: 10px;
border: 1px solid gray;
}