我已创建此HTML + JavaScript表用于计划目的。 它使我可以选择表中的多个单元格，并以很少的其他功能将其输出到JSON文件中。
此刻，当我尝试选择多个单元格时，它会正确创建“虚拟”矩形并选择所有必需的单元格。
我想要取消选择相同的东西，但是由于某种原因，我看不出问题出在哪里。
有人有什么主意吗？
这是代码段。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
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;
var weekdays = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
function mouseUp(el) {
dragging = false;
// Select or deselect the all class switchers
// Make sure that headers are not selected for weekdays
for (var k = 0; k < weekdays.length; k++) {
var count_selected = 0;
for (i = 0; i < 11; i++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 11) {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.add(cls);
} else {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.remove(cls);
};
}
// Make sure that headers are not selected for hours
for (i = 0; i < 11; i++) {
var count_selected = 0;
for (var k = 0; k < weekdays.length; k++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 7) {
var id = "hour-" + i;
document.getElementById(id).classList.add(cls);
} else {
var id = "hour-" + i;
document.getElementById(id).classList.remove(cls);
}
}
}
function mouseDown(el) {
dragging = true;
setStartCell(el);
setEndCell(el);
}
function setStartCell(el) {
startCell = el;
}
function mouseEnter(el) { if (!dragging) return; setEndCell(el); }
function setEndCell(el) {
// Code for Monday
var day_of_week = "mon";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "tue";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "wed";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "thu";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "fri";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sat";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sun";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
// Code for hours
if (el.attr('id').startsWith("hour")) {
var hour = el.attr('id').split("-")[1];
console.log(hour);
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
}
if (el.hasClass(cls)) { // if added then remove on click
el.removeClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex !== -1 && $scope.dragSelectIds.splice(elIndex, 1)
return false;
}
if (!$scope.dragSelectIds) {
$scope.dragSelectIds = [];
}
//$element.find('td').removeClass(cls);
$(cellsBetween(startCell, el)).each(function () {
var el = angular.element(this);
el.addClass(cls);
// change if added, then not to add twice.
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex === -1 && $scope.dragSelectIds.push(el.attr('id'));
});
}
function rectangleSelect(selector, x1, x2, y1, y2) {
var elements = [];
jQuery(selector).each(function () {
var $this = jQuery(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
// this element fits inside the selection rectangle
elements.push($this.get(0));
}
});
return elements;
}
function cellsBetween(start, end) {
var bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left);
bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top);
bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width());
bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height());
var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
for (var i = 0; i < initiallySelectedTds.length; i++) {
if ($(initiallySelectedTds[i]).offset().left < bounds.minX)
bounds.minX = $(initiallySelectedTds[i]).offset().left;
if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX)
bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width();
if ($(initiallySelectedTds[i]).offset().top < bounds.minY)
bounds.minY = $(initiallySelectedTds[i]).offset().top;
if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY)
bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height();
}
return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
}
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));
}
}
});
</script>[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: green;
color: white;
}<!DOCTYPE html>
<html ng-app="plunker">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"
data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-lg-6">
<table drag-select drag-select-ids="ids" class="table table-responsive table-bordered">
<tr>
<td id="hour">Hours ></td>
<td id="hour-0">00</td>
<td id="hour-1">01</td>
<td id="hour-2">02</td>
<td id="hour-3">03</td>
<td id="hour-4">04</td>
<td id="hour-5">05</td>
<td id="hour-6">06</td>
<td id="hour-7">07</td>
<td id="hour-8">08</td>
<td id="hour-9">09</td>
<td id="hour-10">10</td>
</tr>
<tr>
<td id="mon-all">MON</td>
<td id="mon-0"></td>
<td id="mon-1"></td>
<td id="mon-2"></td>
<td id="mon-3"></td>
<td id="mon-4"></td>
<td id="mon-5"></td>
<td id="mon-6"></td>
<td id="mon-7"></td>
<td id="mon-8"></td>
<td id="mon-9"></td>
<td id="mon-10"></td>
</tr>
<tr>
<td id="tue-all">TUE</td>
<td id="tue-0"></td>
<td id="tue-1"></td>
<td id="tue-2"></td>
<td id="tue-3"></td>
<td id="tue-4"></td>
<td id="tue-5"></td>
<td id="tue-6"></td>
<td id="tue-7"></td>
<td id="tue-8"></td>
<td id="tue-9"></td>
<td id="tue-10"></td>
</tr>
<tr>
<td id="wed-all">WED</td>
<td id="wed-0"></td>
<td id="wed-1"></td>
<td id="wed-2"></td>
<td id="wed-3"></td>
<td id="wed-4"></td>
<td id="wed-5"></td>
<td id="wed-6"></td>
<td id="wed-7"></td>
<td id="wed-8"></td>
<td id="wed-9"></td>
<td id="wed-10"></td>
</tr>
<tr>
<td id="thu-all">THU</td>
<td id="thu-0"></td>
<td id="thu-1"></td>
<td id="thu-2"></td>
<td id="thu-3"></td>
<td id="thu-4"></td>
<td id="thu-5"></td>
<td id="thu-6"></td>
<td id="thu-7"></td>
<td id="thu-8"></td>
<td id="thu-9"></td>
<td id="thu-10"></td>
</tr>
<tr>
<td id="fri-all">FRI</td>
<td id="fri-0"></td>
<td id="fri-1"></td>
<td id="fri-2"></td>
<td id="fri-3"></td>
<td id="fri-4"></td>
<td id="fri-5"></td>
<td id="fri-6"></td>
<td id="fri-7"></td>
<td id="fri-8"></td>
<td id="fri-9"></td>
<td id="fri-10"></td>
</tr>
<tr>
<td id="sat-all">SAT</td>
<td id="sat-0"></td>
<td id="sat-1"></td>
<td id="sat-2"></td>
<td id="sat-3"></td>
<td id="sat-4"></td>
<td id="sat-5"></td>
<td id="sat-6"></td>
<td id="sat-7"></td>
<td id="sat-8"></td>
<td id="sat-9"></td>
<td id="sat-10"></td>
</tr>
<tr>
<td id="sun-all">SUN</td>
<td id="sun-0"></td>
<td id="sun-1"></td>
<td id="sun-2"></td>
<td id="sun-3"></td>
<td id="sun-4"></td>
<td id="sun-5"></td>
<td id="sun-6"></td>
<td id="sun-7"></td>
<td id="sun-8"></td>
<td id="sun-9"></td>
<td id="sun-10"></td>
</tr>
</table>
</div>
</div>
<p>Selected IDs: {{ids | json}}</p>
</body>
</html>
更新 创建了GIF，希望可以更好地解释它： https://media.giphy.com/media/39yUQuAbdRSmfVfCll/giphy.gif ->取消选择时，我必须一一取消选择单元格，而不是取消选择多个单元格。
答案 0 :(得分：3)
尝试此代码段。我将总结我的更改（您可以在代码中将其视为注释）
（1）根据起始单元格确定要删除还是添加
您需要根据起始单元格确定要删除集合还是要添加集合。
（2）不要在这里返回
在删除单元格时，您不想返回，因为我们希望它运行用于删除范围的代码。
（3）在此处删除或添加每个元素
这是最重要的更改。在.each()函数中，您实际上需要将每个元素删除或添加到集合中。我创建了名为removeElement和addElement的辅助函数，只是为了提高可读性。
我还建议您尝试重构代码，因为我看到很多重复的逻辑可以分离为各自的功能。但是为了这个例子，我基本上保持不变。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
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 isRemoving = false;
var dragging = false;
var weekdays = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
function mouseUp(el) {
dragging = false;
// Select or deselect the all class switchers
// Make sure that headers are not selected for weekdays
for (var k = 0; k < weekdays.length; k++) {
var count_selected = 0;
for (i = 0; i < 11; i++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 11) {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.add(cls);
} else {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.remove(cls);
};
}
// Make sure that headers are not selected for hours
for (i = 0; i < 11; i++) {
var count_selected = 0;
for (var k = 0; k < weekdays.length; k++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 7) {
var id = "hour-" + i;
document.getElementById(id).classList.add(cls);
} else {
var id = "hour-" + i;
document.getElementById(id).classList.remove(cls);
}
}
}
function mouseDown(el) {
dragging = true;
setStartCell(el);
setEndCell(el);
}
function setStartCell(el) {
startCell = el;
// (1) determine if we're removing or adding based on the start cell
isRemoving = el.hasClass(cls);
}
function mouseEnter(el) { if (!dragging) return; setEndCell(el); }
function setEndCell(el) {
// Code for Monday
var day_of_week = "mon";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "tue";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "wed";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "thu";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "fri";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sat";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sun";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
// Code for hours
if (el.attr('id').startsWith("hour")) {
var hour = el.attr('id').split("-")[1];
console.log(hour);
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
}
if (el.hasClass(cls)) { // if added then remove on click
el.removeClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex !== -1 && $scope.dragSelectIds.splice(elIndex, 1)
// (2) don't return here
// return false;
}
if (!$scope.dragSelectIds) {
$scope.dragSelectIds = [];
}
// (3) remove or add each element here
$(cellsBetween(startCell, el)).each(function(i, elem) {
if (isRemoving)
removeElement($(elem));
else
addElement($(elem));
});
}
function removeElement(el) {
el.removeClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex !== -1 && $scope.dragSelectIds.splice(elIndex, 1)
}
function addElement(el) {
el.addClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex === -1 && $scope.dragSelectIds.push(el.attr('id'));
}
function rectangleSelect(selector, x1, x2, y1, y2) {
var elements = [];
jQuery(selector).each(function () {
var $this = jQuery(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
// this element fits inside the selection rectangle
elements.push($this.get(0));
}
});
return elements;
}
function allCells(start, end) {
console.log('start, end', start, end);
}
function cellsBetween(start, end) {
var bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left);
bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top);
bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width());
bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height());
var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
for (var i = 0; i < initiallySelectedTds.length; i++) {
if ($(initiallySelectedTds[i]).offset().left < bounds.minX)
bounds.minX = $(initiallySelectedTds[i]).offset().left;
if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX)
bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width();
if ($(initiallySelectedTds[i]).offset().top < bounds.minY)
bounds.minY = $(initiallySelectedTds[i]).offset().top;
if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY)
bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height();
}
return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
}
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));
}
}
});
</script>[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: green;
color: white;
}<!DOCTYPE html>
<html ng-app="plunker">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"
data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-lg-6">
<table drag-select drag-select-ids="ids" class="table table-responsive table-bordered">
<tr>
<td id="hour">Hours ></td>
<td id="hour-0">00</td>
<td id="hour-1">01</td>
<td id="hour-2">02</td>
<td id="hour-3">03</td>
<td id="hour-4">04</td>
<td id="hour-5">05</td>
<td id="hour-6">06</td>
<td id="hour-7">07</td>
<td id="hour-8">08</td>
<td id="hour-9">09</td>
<td id="hour-10">10</td>
</tr>
<tr>
<td id="mon-all">MON</td>
<td id="mon-0"></td>
<td id="mon-1"></td>
<td id="mon-2"></td>
<td id="mon-3"></td>
<td id="mon-4"></td>
<td id="mon-5"></td>
<td id="mon-6"></td>
<td id="mon-7"></td>
<td id="mon-8"></td>
<td id="mon-9"></td>
<td id="mon-10"></td>
</tr>
<tr>
<td id="tue-all">TUE</td>
<td id="tue-0"></td>
<td id="tue-1"></td>
<td id="tue-2"></td>
<td id="tue-3"></td>
<td id="tue-4"></td>
<td id="tue-5"></td>
<td id="tue-6"></td>
<td id="tue-7"></td>
<td id="tue-8"></td>
<td id="tue-9"></td>
<td id="tue-10"></td>
</tr>
<tr>
<td id="wed-all">WED</td>
<td id="wed-0"></td>
<td id="wed-1"></td>
<td id="wed-2"></td>
<td id="wed-3"></td>
<td id="wed-4"></td>
<td id="wed-5"></td>
<td id="wed-6"></td>
<td id="wed-7"></td>
<td id="wed-8"></td>
<td id="wed-9"></td>
<td id="wed-10"></td>
</tr>
<tr>
<td id="thu-all">THU</td>
<td id="thu-0"></td>
<td id="thu-1"></td>
<td id="thu-2"></td>
<td id="thu-3"></td>
<td id="thu-4"></td>
<td id="thu-5"></td>
<td id="thu-6"></td>
<td id="thu-7"></td>
<td id="thu-8"></td>
<td id="thu-9"></td>
<td id="thu-10"></td>
</tr>
<tr>
<td id="fri-all">FRI</td>
<td id="fri-0"></td>
<td id="fri-1"></td>
<td id="fri-2"></td>
<td id="fri-3"></td>
<td id="fri-4"></td>
<td id="fri-5"></td>
<td id="fri-6"></td>
<td id="fri-7"></td>
<td id="fri-8"></td>
<td id="fri-9"></td>
<td id="fri-10"></td>
</tr>
<tr>
<td id="sat-all">SAT</td>
<td id="sat-0"></td>
<td id="sat-1"></td>
<td id="sat-2"></td>
<td id="sat-3"></td>
<td id="sat-4"></td>
<td id="sat-5"></td>
<td id="sat-6"></td>
<td id="sat-7"></td>
<td id="sat-8"></td>
<td id="sat-9"></td>
<td id="sat-10"></td>
</tr>
<tr>
<td id="sun-all">SUN</td>
<td id="sun-0"></td>
<td id="sun-1"></td>
<td id="sun-2"></td>
<td id="sun-3"></td>
<td id="sun-4"></td>
<td id="sun-5"></td>
<td id="sun-6"></td>
<td id="sun-7"></td>
<td id="sun-8"></td>
<td id="sun-9"></td>
<td id="sun-10"></td>
</tr>
</table>
</div>
</div>
<p>Selected IDs: {{ids | json}}</p>
</body>
</html>