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

Question

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

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

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

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

alt text

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

40

javascript

задан Community 23 May 2017 в 11:54

2 ответа

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

Не уверен, что вы хотели чистую реализацию JavaScript, я использовал jQuery для удобства.

12

ответ дан 27 November 2019 в 01:18

Другие вопросы по тегам:

javascript

Похожие вопросы:

score 76 · Accepted Answer

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

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

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

Несколько соответствующих фактов:

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