Question

100

Select Cells On A Table By Dragging

rated 0 times [ 107] [ 7] / answers: 1 / hits: 54553 / 15 Years ago, wed, january 6, 2010, 12:00:00

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.

alt alt

Thank Cacoo for the sexy diagrams. It's like an online visio, really nice. Check it out ;)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arielle

Add To Favorites

Follow

Total Points: 373

Total Questions: 105

Total Answers: 96

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

answered 15 Years ago raveno · Accepted Answer

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>