//console.clear();
var BUTTON_LEFT = 1,
BUTTON_RIGHT = 2;
var startCell = null;
(function() {
$("#select").selectmenu();
$(".mouse-event-cell")
.on('mousedown', onMouseDown)
.on('mouseup', onMouseUp)
.on('mousemove', onMouseOver);
$(document)
.on('mousemove', onDocMouseOver)
.on('mouseup', onDocMouseUp);
})();
function onDocMouseOver(e) {
if (e.buttons !== BUTTON_LEFT) {
startCell = null;
clearFill();
}
}
function onDocMouseUp(e) {
if (e.buttons !== BUTTON_LEFT) {
startCell = null;
clearFill();
}
}
function onMouseDown(e) {
isInsideCell = true;
if (startCell === null)
startCell = e.currentTarget;
};
function onMouseOver(e) {
if (startCell !== null) {
fill(startCell, e.currentTarget, 'region');
}
e.stopPropagation();
}
function onMouseUp(e) {
var endCell = e.currentTarget;
if (startCell !== null) {
fill(startCell, endCell, 'selected');
}
startCell = null;
e.stopPropagation()
}
function fill(startCell, endCell, classToAdd) {
var col0 = startCell.dataset['column'],
row0 = startCell.dataset['row'],
col1 = endCell.dataset['column'],
row1 = endCell.dataset['row'],
colMin = Math.min(col0, col1),
colMax = Math.max(col0, col1),
rowMin = Math.min(row0, row1),
rowMax = Math.max(row0, row1);
clearFill();
if (startCell === endCell) {
console.log('same-cell');
} else {
console.log('range-of-cell');
}
//console.log(startCell, endCell);
for (var itCol = colMin; itCol <= colMax; itCol++) {
for (var itRow = rowMin; itRow <= rowMax; itRow++) {
$('#codexpl .mouse-event-cell#cell_' + itRow + '_' + itCol).addClass(classToAdd);
}
}
}
function clearFill() {
$('#codexpl .mouse-event-cell').removeClass('selected').removeClass('region');
}
.ui-selectmenu-button.ui-button {
width: 5em;
}
select {
width: auto;
}
table {
border-collapse: separate;
}
td.mouse-event-cell {
border: 1px solid #ddd;
padding: 2px 10px;
height: 30px;
/*To disable the text selection*/
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
td.selected {
background-color: goldenrod;
color: white;
}
td.region {
border-style: dashed;
border-color: #BBB;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="selecting multiple cells">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<table id="codexpl">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td id="cell_0_0" data-row="0" data-column="0" class='mouse-event-cell'>
<select id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td id="cell_0_1" data-row="0" data-column="1" class='mouse-event-cell'>cell[0][1]</td>
<td id="cell_0_2" data-row="0" data-column="2" class='mouse-event-cell'>cell[0][2]</td>
<td id="cell_0_3" data-row="0" data-column="3" class='mouse-event-cell'>cell[0][3]</td>
<td id="cell_0_4" data-row="0" data-column="4" class='mouse-event-cell'>cell[0][4]</td>
</tr>
<tr>
<td id="cell_1_0" data-row="1" data-column="0" class='mouse-event-cell'>cell[1][0]</td>
<td id="cell_1_1" data-row="1" data-column="1" class='mouse-event-cell'>cell[1][1]</td>
<td id="cell_1_2" data-row="1" data-column="2" class='mouse-event-cell'>cell[1][2]</td>
<td id="cell_1_3" data-row="1" data-column="3" class='mouse-event-cell'>cell[1][3]</td>
<td id="cell_1_4" data-row="1" data-column="4" class='mouse-event-cell'>cell[1][4]</td>
</tr>
<tr>
<td id="cell_2_0" data-row="2" data-column="0" class='mouse-event-cell'>cell[2][0]</td>
<td id="cell_2_1" data-row="2" data-column="1" class='mouse-event-cell'>cell[2][1]</td>
<td id="cell_2_2" data-row="2" data-column="2" class='mouse-event-cell'>cell[2][2]</td>
<td id="cell_2_3" data-row="2" data-column="3" class='mouse-event-cell'>cell[2][3]</td>
<td id="cell_2_4" data-row="2" data-column="4" class='mouse-event-cell'>cell[2][4]</td>
</tr>
<tr>
<td id="cell_3_0" data-row="3" data-column="0" class='mouse-event-cell'>cell[3][0]</td>
<td id="cell_3_1" data-row="3" data-column="1" class='mouse-event-cell'>cell[3][1]</td>
<td id="cell_3_2" data-row="3" data-column="2" class='mouse-event-cell'>cell[3][2]</td>
<td id="cell_3_3" data-row="3" data-column="3" class='mouse-event-cell'>cell[3][3]</td>
<td id="cell_3_4" data-row="3" data-column="4" class='mouse-event-cell'>cell[3][4]</td>
</tr>
<tr>
<td id="cell_4_0" data-row="4" data-column="0" class='mouse-event-cell'>cell[4][0]</td>
<td id="cell_4_1" data-row="4" data-column="1" class='mouse-event-cell'>cell[4][1]</td>
<td id="cell_4_2" data-row="4" data-column="2" class='mouse-event-cell'>cell[4][2]</td>
<td id="cell_4_3" data-row="4" data-column="3" class='mouse-event-cell'>cell[4][3]</td>
<td id="cell_4_4" data-row="4" data-column="4" class='mouse-event-cell'>cell[4][4]</td>
</tr>
</table>
</body>
</html>