Выбор ячеек на таблице путем перетаскивания

Я смотрел этот вопрос и увидел ссылку на игру iPhone, в которой вы перетаскиваете экран, выбирая буквы, когда вы идете.

Мне было любопытно увидеть, как это происходит в Javascript, используя таблицы. Таким образом, вы перетащите указатель мыши на каждую ячейку, чтобы они были выделены.

Я не уверен, какой будет лучший метод, но я надеюсь, что кто-то пойдет. Кто-то попытался сделать это здесь, но на самом деле это не работает.

alt textalt text

Благодарим Cacoo для сексуальных диаграмм. Это похоже на онлайн-визуо, действительно приятно. Проверьте это;)

Ответы

Ответ 1

Вот рабочий прототип: http://jsfiddle.net/few5E/ Использование jQuery для подключения DOM, но может быть легко реализовано с помощью другой структуры.

Обновить: http://jsfiddle.net/Brv6J/ немного другую версию - выделенное состояние изменится только при отпускании и нажатии еще раз.

Обновление 2: http://jsfiddle.net/Brv6J/3/ - привязка к событию, чтобы текст не был выбран в IE.

Несколько актуальных фактов:

  • Событие mousedown для ячеек таблицы подключается для отслеживания фактического щелчка. Это событие остановлено, поэтому выбор текста затруднен. Также привязка ontextselect для того же эффекта в IE.
  • Событие mouseover будет переключать выделенный класс для ячейки
  • Событие mouseout подключено к 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>

Ответ 3

Если вы выбрали выбор ячейки в виде таблицы (в столбце/строках), вам нужно выделить каждую ячейку в каждой строке, которая находится между вашим начальным и конечным индексом (как строка, так и ячейка) в событии mouseover:

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.