Select Cells On A Table By Dragging

前端未结

关注

 3  1925

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 implime

相关标签:

3条回答

野性不改

2020-11-28 21:04

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

Not sure if you wanted pure-Javascript implementation, I used jQuery for convenience.

0 讨论(0)
发布评论:

提交评论
- 加载中...
花落未央

2020-11-28 21:09
If you're after spreadsheet-like cell selection (in column/row blocks), you need to highlight every cell in every row that is between your start & end index (both row and cell) in your mouseover event:
```
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");
    }        
}
```
As the user might start selecting cells from all directions (up-bottom, bottom-up, right-left, left-right) you need to assign the correct indexes for start & end.

Here is a jsFiddle.
0 讨论(0)
发布评论:

提交评论
- 加载中...

再見小時候

2020-11-28 21:15

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 in isMouseDown.

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>

0 讨论(0)