在 HTML 表格上拖动选择（带有 colspan/rowspan 的方形/矩形部分）答案

【问题标题】：Drag Selection on HTML Table (Square/Rectangle Section with colspan/rowspan)在 HTML 表格上拖动选择（带有 colspan/rowspan 的方形/矩形部分）
【发布时间】：2017-11-13 23:57:07
【问题描述】：

我正在使用THIS 实现以选择表格中的单元格，但是在我的情况下，单元格可以有 colspan 或 rowspan 因此选择不限于方形/矩形选择（尝试选择“1-3 " 和 "2-3" 也应该自动选择 "1-4")。它类似于THIS 问题，但我无法得到任何工作。你知道这将如何实现吗？

链接：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;
}

【问题讨论】：

是否应该选择1-1作为左上角，2-3作为右下角也总是选择1-4？那么您将如何选择 1-1,1-2,1-3,2-1,2-2,2-3？也许这样的东西更适合您正在寻找的功能：nightlycoding.com/index.php/2014/02/…
是的。它应该基本上模仿excel的功能。所以选择应该始终是正方形/矩形。

标签： javascript jquery css angularjs html-table

【解决方案1】：

我使用了开始和结束单元格的 x 和 y 坐标，然后计算了相应矩形内的每个单元格（甚至是部分）。然后获取这些单元格的边界矩形并重复该过程，直到选择不再扩展。

编辑：函数rectangleSelect（几乎完全）来自：Get DOM elements inside a rectangle area of a page

编辑 2：现在支持行跨度和其他边缘情况，例如选择 [3-2,2-3]：

http://plnkr.co/edit/8wZvcU1SgmieStsqg3lD?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <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">
    <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" colspan=2>2-1</td>
        <td id="td-2-3" rowspan="2">2-3</td
        ><td id="td-2-4">2-2</td>
      </tr>
      <tr>
        <td id="td-3-1">3-1</td>
        <td id="td-3-2">3-2</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>
    <p>Selected IDs: {{ids | json}}</p>
  </body>

</html>

CSS：不变

JS：

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 isPointBetween(point,x1,x2){
        return (point >=x1 && point <=x2) ||(point <=x1 && point>=x2);
      }
      function rectangleSelect(selector, bounds) {
    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.outerWidth();
        var h = $this.outerHeight();
        if ((isPointBetween(x,bounds.minX,bounds.maxX) && isPointBetween(y,bounds.minY,bounds.maxY))||
            (isPointBetween(x+w,bounds.minX,bounds.maxX) && isPointBetween(y+h,bounds.minY,bounds.maxY))
            ) {
            elements.push($this.get(0));
        }
    });
    return elements;
}
      function getBoundsForElements(elements){
        var x1= elements.reduce(function(currMinX,element){
          var elementLeft = $(element).offset().left;
          return currMinX && currMinX<elementLeft ? currMinX : elementLeft;
        },undefined);
        var x2= elements.reduce(function(currMaxX,element){
          var elementRight = $(element).offset().left+$(element).outerWidth();
          return currMaxX && currMaxX>elementRight ? currMaxX : elementRight;
        },undefined);
        var y1= elements.reduce(function(currMinY,element){
          var elementTop = $(element).offset().top;
          return currMinY && currMinY<elementTop ? currMinY : elementTop;
        },undefined);
        var y2= elements.reduce(function(currMaxY,element){
          var elementBottom = $(element).offset().top+$(element).outerHeight();
          return currMaxY && currMaxY>elementBottom ? currMaxY : elementBottom;
        },undefined);
        return {
          minX: x1,
          maxX: x2,
          minY: y1,
          maxY: y2
        };

      }


      function cellsBetween(start, end) {
        var bounds,elementsInside;
        elementsInside = [start,end];
        do{
          bounds = getBoundsForElements(elementsInside);
          var elementsInsideAfterExpansion = rectangleSelect("td",bounds);
          if(elementsInside.length==elementsInsideAfterExpansion.length)
            return elementsInside;
          else
            elementsInside=elementsInsideAfterExpansion;
        }while(true)

      }


      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));
    }
  }
});

【讨论】：

谢谢！虽然有行跨度的情况呢？ plnkr.co/edit/RIlCH4G1EHQPFDBD2xSV?p=preview（尝试从3-2拖到3-4）
有人可以添加对多选的支持吗？每次我做一个新的选择，旧的就会消失？
某一行的所有单元格合并时出现错误，并试图选择垂直的一列，滚动这一行。（像十字架）