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

我在查看this question，并看到了iPhone游戏的参考，您可以在屏幕上拖动选择字母。通过拖动在表格上选择单元格

我很好奇在Javascript中使用表格来看到这一点的实现。因此，您需要将鼠标拖放到每个单元格上，然后才会突出显示。

我不确定最好的方法是什么，但我希望有人去。有人试图here，但它并没有真正的工作。

alt text

为性感图谢谢Cacoo。这就像在线Visio，非常好。检查它;）

来源

2010-01-06 Ben Shelock

有趣的挑战（和图）。诀窍是防止浏览器中的默认文本选择... – tbeseda 2010-01-06 15:29:56

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

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

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

一些相关的事实：

表格单元格的MouseDown事件被钩追踪实际点击。该事件已停止，因此文本选择受阻。也绑定ontextselect在IE中的相同效果。
鼠标悬停事件将切换单元格突出显示的类
鼠标悬停事件挂在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>

来源

2010-01-06 15:48:40

有趣的是，您使用toggleClass ...在这种情况下，当您将鼠标移回已经选定的单元格时，会删除所选内容。根据应用逻辑，这可能是正确的也可能不正确。直观地（和我的解决方案一样），我保留所有选定的内容，直到mouseup。 – Jaanus 2010-01-06 15:58:07

请参阅备用链接:)刚添加它。 – 2010-01-06 15:59:37

toggleClass的使用只是一种破解，可以这么说。在一个适当的单元可测试的实现中，你可以使用一个带有布尔值的实例，或者类似的东西。 – 2010-01-06 16:01:16

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

不知道，如果你想纯Javascript实现，我用的jQuery为了方便。

来源

2010-01-06 15:43:29 Jaanus

无论如何，你可以轻松地重构这也支持触摸事件？ – hlyates 2015-04-22 18:33:00

@ hlyates如何重构这样的事情来支持触摸事件的任何建议？ – maco1717 2016-11-25 00:15:22

如果您的电子表格样细胞选择后是（在列/行块），您需要突出每一行那是你之间的每一个细胞在您的鼠标悬停事件开始&结束索引（行和单元格）：

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

由于用户可能会开始从四面八方选择单元格（从上到下，自下而上，右左，左，右），你需要分配正确的索引开始&结束。

这是jsFiddle。

来源

2015-08-07 11:13:19 Martin

更好的是，您将使用Dojo或jQuery（或更高级别的东西） – paulsm4 2015-10-16 20:08:11

添加'表。在mouseover函数中找到（“。selected”）。removeClass（“selected”）;'使其更像电子表格一样，即在选定区域移动时取消选择单元格。更新[小提琴]（http://jsfiddle.net/chechs/qvw0pgcu/22/） – User528491 2015-11-20 09:03:48

@ User528491好点。基础小提琴更新。谢谢。 – Martin 2016-06-27 14:19:55

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

回答

相关问题