ansaurus

Question

Select Cells On A Table By Dragging

Answer 1

+1 A:

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

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

Jaanus 2010-01-06 15:43:29

Answer 2

+1 A:

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"&gt;
<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>

August Lilleaas 2010-01-06 15:48:40

Interesting that you use toggleClass... in this case, when you hover back to a cell that's already selected, this removes the selection. This may or may not be correct based on application logic. Intuitively (and as I do in my solution), I keep all selected until mouseup.

Jaanus 2010-01-06 15:58:07

See alternate link :) Just added it.

August Lilleaas 2010-01-06 15:59:37

The use of toggleClass is just a hack, so to speak. In a proper unit testable implementation, you would use an instance with a boolean, or something like that.

August Lilleaas 2010-01-06 16:01:16

Also, changing the state logic so that it will de-select everything on mouseup (that's what you describe, right?) is trivial. A `$("#our_table td").removeClass("highlighted")` on the mouseup event would be the appropriate hack in this case.

August Lilleaas 2010-01-06 16:04:13

ansaurus

tags:

views:

answers:

Select Cells On A Table By Dragging

related questions