Question

我正在查看this question并看到iPhone游戏的引用，您可以在屏幕上拖动选择字母。

我很想知道在Javascript中使用表格来实现这一点。因此，您将鼠标拖到每个单元格上，然后突出显示。

我不确定最好的方法是什么，但我希望有人有所作为。有人尝试过它here，但它确实没有用。

alt text

感谢Cacoo的性感图表。这就像一个在线visio，非常好。看看吧;）

Answer 1

这是一个工作原型：http://jsfiddle.net/few5E/使用jQuery进行DOM挂钩，但可以很容易地用另一个框架实现。

更新：http://jsfiddle.net/Brv6J/稍有不同的版本 - 突出显示的状态只会在您发布并再次点击时更改。

更新2 ：http://jsfiddle.net/Brv6J/3/ - 绑定onselectstart，以便在IE中未选择文字。

一些相关事实：

表格单元格的mousedown事件被挂钩以跟踪实际点击。此事件已停止，因此文本选择受阻。同样绑定ontextselect以获得与IE相同的效果。
mouseover事件将切换单元格的突出显示的类
mouseout事件挂钩在document上。这是为了确保它始终运行。如果mouseup事件挂钩在表格单元格上，如果您使用鼠标在表格外部释放鼠标键，则不会触发该事件。此状态在isMouseDown。

参考资料的完整源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css" media="screen">
    table td {
      width:100px;
      height:100px;
      text-align:center;
      vertical-align:middle;
      background-color:#ccc;
    }

    table td.highlighted {
      background-color:#999;
    }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="1" id="our_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>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8">
    $(function () {
      var isMouseDown = false;
      $("#our_table td")
        .mousedown(function () {
          isMouseDown = true;
          $(this).toggleClass("highlighted");
          return false; // prevent text selection
        })
        .mouseover(function () {
          if (isMouseDown) {
            $(this).toggleClass("highlighted");
          }
        })
        .bind("selectstart", function () {
          return false; // prevent text selection in IE
        });

      $(document)
        .mouseup(function () {
          isMouseDown = false;
        });
    });
  </script>
</body>
</html>

Answer 2

http://www.jaanuskase.com/stuff/dragSelect.html

不确定您是否需要纯Javascript实现，为方便起见，我使用了jQuery。

Answer 3

如果你在电子表格式的单元格选择之后（在列/行块中），则需要突出显示在开始和放置之间的每一行中的每个单元格。鼠标悬停事件中的结束索引（行和单元格）：

for (var i = rowStart; i <= rowEnd; i++) {
    var rowCells = table.find("tr").eq(i).find("td");
    for (var j = cellStart; j <= cellEnd; j++) {
        rowCells.eq(j).addClass("selected");
    }        
}

由于用户可能开始从所有方向（上下，自下而上，左右，左右）选择单元格，因此需要为start＆amp;端。

这是jsFiddle。

通过拖动选择表格上的单元格

3 个答案: