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

Question

我是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 

- Deepa Thalikar

---

从A拖动鼠标到M必须选择每个单元格。 - Deepa Thalikar

你需要先计算出第一个元素（A）和最后一个元素（E）与相邻元素的值。如果有任何相邻元素，则应该被选择。例如，如果你从A到E，那么A的相邻元素是A+1=B，它应该被选择，然后(E-1)=D也应该被包括在选择中。将所有框转换为ASCII字符，然后进行计算。 - Abhishek B.

你的布局是固定还是可变的？如果你有一个4x4的矩阵，那么输出会是什么？A B C D | E F G H | I J K L | M N O P。然后从F拖到O，那么会被突出显示什么？ - Abhishek B.

Answer 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

@arunes 这真是太棒了.. 有没有办法修改它，使其在向下移动时不填满整行？我正在尝试做一些遵循正方形x/y坐标的事情。 - xxstevenxo

Answer 2

JQuery Selectable 可能更适合这个要求。

- Snives

---

是的，你说得对！我在这个例子中使用了“selectable”：http://stackoverflow.com/questions/9796699/jquery-ui-selectable-plugin-multiple-mouse-drag-selection-and-unselect-option。但是我的限制是不能在鼠标拖动时取消选择多个单元格（只能一次取消一个单元格）。你对这个问题有什么想法吗？ - Deepa Thalikar

好的解决方案，jQuery("table").selectable({filter: 'td'}); 将启用表格单元格的水平和垂直（即真正的正方形）选择。http://jsfiddle.net/fq941d4L/ - Fanky

Answer 3

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

- Ner

---

链接已损坏：( - Fanky

Answer 4

你可以使用 jQuery jquery.ui.draggable.js。

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

- codef0rmer

---

@Arunes，感谢你找到解决方案。我是JavaScript的新手。实际上，我想要做几个改变：

1. 选择应该在鼠标松开后保持，这意味着假设我选择了一组单元格，然后移动到另一个位置并选择其他不相连的单元格，之前的选择不应该被取消。
2. 当我从A拖动鼠标到E时，我不希望C被选中（只有A、B、D和E应该被选中）。这可行吗？

- Deepa Thalikar