通过拖动选择表格上的单元格 [英] Select Cells On A Table By Dragging
问题描述
我在看。这就像一个在线visio，非常好。检查出来;）
这是一个工作原型： http://jsfiddle.net/few5E/ 使用jQuery进行DOM挂钩，但可以使用其他框架轻松实现。
更新： http://jsfiddle.net/Brv6J/ 略有不同的版本 - 突出显示的状态只会在您发布并再次单击时更改。
更新2 ： http://jsfiddle.net/Brv6J/3/ - 绑定onselectstart，以便在IE中不选择文本。
一些相关事实：
- 表格单元格的mousedown事件被挂钩以跟踪实际情况单击。此事件已停止，因此文本选择受阻。还可以在IE中选择绑定ontextselect以获得相同的效果。
- 鼠标悬停事件将切换单元格的突出显示的类
- 鼠标输出事件被挂在
文档。这是为了确保它始终运行。如果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/xhtmlxml：lang =enlang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>< / title>
< style type =text / cssmedia =screen>
table td {
width：100px;
身高：100px;
text-align：center;
vertical-align：middle;
background-color：#ccc;
}
table td.highlighted {
background-color：＃999;
}
< / style>
< / head>
< body>
< table cellpadding =0cellspacing =1id =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.jstype =text / javascript>< ; /脚本>
< script type =text / javascriptcharset =utf-8>
$（function（）{
var isMouseDown = false;
$（＃our_table td）
.mousedown（function（）{
isMouseDown = true;
$（this）.toggleClass（highlight）;
返回false; //阻止文本选择
}）
.mouseover（function（）{
if （isMouseDown）{
$（this）.toggleClass（highlight）;
}
}）
.bind（selectstart，function（）{
return false; //阻止IE
中的文本选择};
$（文档）
.mouseup（function（）{
isMouseDown = false;
}）;
}）;
< / script>
< / body>
< / html>
I was looking at this question and saw the reference to the iPhone game where you drag across the screen selecting letters as you go.
I was curious to see an implimentation of this in Javascript using tables. So you'd drag the mouse over each cell they would then become highlighted.
I'm not sure what the best method would be but I hope someone has a go. Someone attempted it here, but it doesn't really work.
Thank Cacoo for the sexy diagrams. It's like an online visio, really nice. Check it out ;)
Here's a working prototype: http://jsfiddle.net/few5E/ Using jQuery for DOM hooking, but could easily be implemented with another framework.
Update: http://jsfiddle.net/Brv6J/ a slightly different version - the highlighted state will only change when you release and click again.
Update 2: http://jsfiddle.net/Brv6J/3/ - binding onselectstart so that text is not selected in IE.
A few relevant facts:
- The mousedown event of the table cells is hooked to track the actual click. This event is stopped, so that text selection is hindered. Also binding ontextselect for the same effect in IE.
- The mouseover event will toggle the highlighted class for the cell
- The mouseout event is hooked on
document. This is to ensure that it always runs. If the mouseup event was hooked on the table cell, it would not trigger if you released the mouse key with the mouse outside of the table. This state is tracked inisMouseDown.
Full source code for reference:
<!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>
这篇关于通过拖动选择表格上的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
