鼠标拖动时突出显示表格单元格答案

【问题标题】：Highlighting table cells on mouse drag鼠标拖动时突出显示表格单元格
【发布时间】：2017-07-27 21:29:58
【问题描述】：

我是 Javascript/JQuery 的新手。我想知道如何修改此处显示的表格单元格突出显示http://jsfiddle.net/Brv6J/，并进行允许以方形模式进行选择的修改。

例如，将A, B, C, D, G, H 和I 视为表格单元格。从 A 到 E 沿对角线拖动鼠标应该选择单元格A,B,D & E

A B C 
D E F 
G H I

【问题讨论】：

从A thru 拖动鼠标必须选择每个单元格。
为此，您需要使用相邻元素计算第一个 (A) 和最后一个元素 (E)。如果发现任何邻居，则应将其选中.. for eq。如果你从 A 到 E，那么 A 的邻居意味着 A+1=B 它选择了，那么 (E-1)=D 应该参与选择。将所有框转换为ASCII字符然后计算它。
你的布局是固定的还是可变的？如果你有 4x4 矩阵呢？会输出什么.. A B C D | E F G H | I J K L | M N O P 然后从 F -> O 拖动然后突出显示什么？

标签： jquery highlight cells

【解决方案1】：

我之前为日历选择编写了脚本。我希望这对你有帮助。

脚本：

$(function () {
    $("#table td")
        .mousedown(rangeMouseDown)
        .mouseup(rangeMouseUp)
        .mousemove(rangeMouseMove);
});

var dragStart = 0;
var dragEnd = 0;
var isDragging = false;

function rangeMouseDown(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragStart = allCells.index($(this));
        isDragging = true;

        if (typeof e.preventDefault != 'undefined') { e.preventDefault(); } 
        document.documentElement.onselectstart = function () { return false; };
    } 
}

function rangeMouseUp(e) {
    if (isRightClick(e)) {
        return false;
    } else {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));

        isDragging = false;
        if (dragEnd != 0) {
            selectRange();
        }

        document.documentElement.onselectstart = function () { return true; }; 
    }
}

function rangeMouseMove(e) {
    if (isDragging) {
        var allCells = $("#table td");
        dragEnd = allCells.index($(this));
        selectRange();
    }            
}

function selectRange() {
    $("#table td").removeClass('selected');
    if (dragEnd + 1 < dragStart) { // reverse select
        $("#table td").slice(dragEnd, dragStart + 1).addClass('selected');
    } else {
        $("#table td").slice(dragStart, dragEnd + 1).addClass('selected');
    }
}

function isRightClick(e) {
    if (e.which) {
        return (e.which == 3);
    } else if (e.button) {
        return (e.button == 2);
    }
    return false;
}

CSS：

#table { border:1px solid #ccc; }
#table td { padding:50px; }
#table td.selected { background-color:#ccc; }

HTML：

<table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

我在http://jsfiddle.net/5VXDt/1/创建小提琴

可以通过添加点击事件取消选择或选择一个单元格来改进脚本。

【讨论】：

太棒了！非常感谢，Arunes！
我很高兴为您提供帮助。不要忘记标记作为回答;)
@arunes 这真是太棒了.. 有什么办法可以修改它，这样当你向下移动时它就不会填满整行？我正在尝试做一些遵循平方 x/y 坐标的事情

【解决方案2】：

JQuery Selectable 可能更符合要求。

【讨论】：

是的，你是对的！我在这个例子中使用了可选：stackoverflow.com/questions/9796699/…。但是我受到无法在鼠标拖动时取消选择多个单元格的限制（一次只能取消选择一个单元格）。对这个问题有什么想法吗？
很好的解决方案，jQuery( "table" ).selectable({filter: 'td'});将启用表格单元格的水平和垂直（即真正的正方形）选择。 jsfiddle.net/fq941d4L

【解决方案3】：

为了更方便用户选择日历单元格，我推荐这个eHighLight Plugin。一个非常简单小巧的文档元素高亮插件

【讨论】：

链接坏了:(

【解决方案4】：

你可以使用jqueryjquery.ui.draggable.js

 $('td').draggable({
    start  : function (event, ui) {
        // highlighting code
     },
     stop : function (event, ui) {
        //restore the highlighting code
     }
});

【讨论】：

@Arunes，感谢您制定解决方案。我是 Javascript 的新手。我实际上想要一些更改 - 1. 选择应该在 mouseup 上持续存在，这意味着假设我选择一组单元格然后移动到不同的位置并选择另一个未连接的单元格，之前的选择不应该被取消选择. 2.当我将鼠标从A拖到E时，我不希望C被选中（只选择A、B、D和E）这样可行吗？