Fatal编程技术网
  • javascript/
  • Javascript 通过拖动选择表格上的单元格

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

javascript

Javascript 通过拖动选择表格上的单元格,javascript,Javascript,我看了一下，看到了iPhone游戏的参考资料，你在屏幕上拖动鼠标，一边走一边选择字母 我很好奇看到Javascript使用表实现了这一点。因此，您可以将鼠标拖动到每个单元格上，然后这些单元格将高亮显示 我不确定最好的方法是什么，但我希望有人能尝试一下。有人试过了，但没用 谢谢你的性感图表。它就像一个在线visio，非常好。看看吧；） 不确定您是否想要纯Javascript实现，我使用jQuery是为了方便。这里有一个工作原型：使用jQuery进行DOM挂钩，但可以很容易地用另一个框架实现 更

我看了一下，看到了iPhone游戏的参考资料，你在屏幕上拖动鼠标，一边走一边选择字母

我很好奇看到Javascript使用表实现了这一点。因此，您可以将鼠标拖动到每个单元格上，然后这些单元格将高亮显示

我不确定最好的方法是什么，但我希望有人能尝试一下。有人试过了，但没用

谢谢你的性感图表。它就像一个在线visio，非常好。看看吧；）

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

这里有一个工作原型：使用jQuery进行DOM挂钩，但可以很容易地用另一个框架实现

更新：稍有不同的版本-突出显示的状态只有在释放并再次单击时才会更改

更新2：-绑定SelectStart，以便在IE中不选择文本

一些相关事实：

  • 表格单元格的mousedown事件被钩住以跟踪实际的单击。此事件已停止，因此文本选择受阻。同时绑定ontextselect以在IE中实现相同的效果
  • mouseover事件将为单元格切换高亮显示的类
  • mouseout事件挂接在
    文档上。这是为了确保它始终运行。如果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>


表td{
宽度：100px；
高度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
背景色：#ccc；
}
表td.1{
背景色：#999；
}
A.
B
C
D
E
F
G
H
我
$（函数（）{
var isMouseDown=错误；
$（“我们的表td”）
.mousedown（函数（）{
isMouseDown=真；
$（this.toggleClass（“突出显示”）；
返回false；//防止文本选择
})
.mouseover（函数（）{
如果（isMouseDown）{
$（this.toggleClass（“突出显示”）；
}
})
.bind（“选择开始”，函数（）{
返回false；//防止在IE中选择文本
});
$（文件）
.mouseup（函数（）{
isMouseDown=错误；
});
});
如果要选择类似电子表格的单元格（在列/行块中），则需要在鼠标悬停事件中突出显示起始索引和结束索引（行和单元格）之间的每行中的每个单元格：

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

for（var i=rowStart；i有趣的挑战（和图表）。诀窍是防止浏览器中的默认文本选择…有趣的是您使用了toggleClass…在这种情况下，当您将鼠标悬停回已选择的单元格时，这会删除选择。根据应用程序逻辑，这可能是正确的，也可能是不正确的。直觉上（就像我在解决方案中所做的那样），我一直保持选中状态，直到鼠标点击为止。请参阅备用链接：）刚刚添加了它。可以说，使用toggleClass只是一种攻击。在一个合适的单元可测试实现中，您可以使用一个带有布尔值的实例，或者类似的东西。此外，更改状态逻辑以便它将取消mouseup上的所有选择（这就是您所描述的，对吧？）也很简单。在这种情况下，mouseup事件上的
$（“#我们的#表td”）.removeClass（“突出显示”）
将是合适的破解方法。对于那些希望在新创建的表上使用它的人（通过ajax），看看这个：无论如何，你可以很容易地重构它来支持触摸事件？@hlyates有没有关于如何重构这样的东西来支持触摸事件的建议？更好的方法是，你可以使用Dojo或jQuery（或者更高级的东西）Add
table.find（.selected”）.removeClass（“selected”）mouseover
功能中选择code>，使其更像电子表格，即在选定区域上移动时取消选择单元格。更新这是伟大的，与轮班选择工作。如果它也支持ctrl选择，那就太棒了。