通过拖动在表格上select单元格
我正在看这个问题 ，看到你的iPhone游戏拖动你的屏幕select字母的参考。
我很好奇在JavaScript中使用表来看到这一点。 所以你会把鼠标拖到每个单元格上，然后他们会变成高亮显示。
我不确定什么是最好的方法，但我希望有人走了。 有人试图在这里 ，但它并没有真正的工作。
感谢Cacoo的性感图表。 这就像在线visio，非常好。 一探究竟 ;）
这里有一个工作原型： http : //jsfiddle.net/few5E/使用jQuery的DOM钩子，但可以很容易地实现与另一个框架。
更新 ： http : //jsfiddle.net/Brv6J/稍有不同的版本 – 突出显示的状态只会在您释放并再次单击时更改。
更新2 ： http : //jsfiddle.net/Brv6J/3/ – 绑定onselectstart，以便在IE中不select文本。
一些相关的事实：
- 表单元的mousedown事件被挂钩以跟踪实际的点击。 此事件已停止，因此文本select受阻。 在IE中也绑定ontextselect相同的效果。
- 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>
http://www.jaanuskase.com/stuff/dragSelect.html
不知道你是否想要pure-Javascript的实现，为了方便，我使用了jQuery。
如果您使用类似电子表格的单元格select（在列/行块中），则需要在鼠标hover事件中突出显示每行中位于开始和结束索引（行和单元格）之间的每个单元格：
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"); } }
由于用户可能会从所有方向（上下，左下，右上，左右）开始select单元格，因此需要为开始和结束分配正确的索引。
这是一个jsFiddle 。
