通過拖動在表格上選擇單元格

我在查看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

通過拖動在表格上選擇單元格

回答

相關問題