Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделить интервал элементов (от a до b) двумя кликами (https://javascript.ru/forum/dom-window/61005-vydelit-interval-ehlementov-ot-do-b-dvumya-klikami.html)

Teamur 31.01.2016 19:49

Может сделать своеобразный счетчик кликов мышью?
А получение номера элемента выполнять ПРЕДВАРИТЕЛЬНО, еще ДО кликов.
Первый клик - присваиваем переменной a номер, полученный предварительно при наведении.
Далее следуя за курсором, подсвечиваем элементы от a до текущего элемента, над которым находится курсор, постоянно обновляя переменную b
Слова словами, но я уверен, что оптимальное решение задачи займет строк 15-20.

А здесь нечто похожее, но реализованное на CSS:
https://jsfiddle.net/hma21mxm/
Но хотелось бы обойтись без input-ов, label-ов.
Только div-ы.
Все, что я могу на данный момент - предлагать хоть что-то, имеющее отношение к теме.

DynkanMaclaud 31.01.2016 19:54

Teamur,
https://jsfiddle.net/daniilKhanin/r48q2o6e/1/
да уж... когда начинал писать не думал что такой ГО...код получится)))))

рони 31.01.2016 19:59

DynkanMaclaud,
сложно вернуть синий фон за курсором, осообенно если блоки в 2 ряда.

destus 31.01.2016 20:02

Цитата:

Сообщение от рони (Сообщение 405751)
что - то этого не наблюдаю

Да вроде есть :D

Если я правильно понял автора, то это когда нажимаем любой элемент, растягиваем на n элементов вправо(влево), а затем убираем курсор за пределы контейнера, то синяя область исчезает.

Teamur 31.01.2016 20:15

destus,
Верно.

DynkanMaclaud,
синяя область должна следовать за курсором пока вы не совершите второй клик, но в пределах контейнера. Другими словами, если увести курсор со второго ряда на первый, то синька со второго ряда пропадет, а будет уже на первом ряду у курсора, естественно при этом цепь синих элементов не должна нигде прерываться.

DynkanMaclaud 31.01.2016 20:16

рони,
Teamur, исправил https://jsfiddle.net/daniilKhanin/r48q2o6e/3/

DynkanMaclaud 31.01.2016 20:17

Эххх вот если бы рони,
показал бы свой пример, где я уверен код был бы не таким ужасным...

рони 31.01.2016 20:24

Цитата:

Сообщение от DynkanMaclaud
показал бы свой пример

я уже показывал выше, если вы не смотрели ...
Цитата:

Сообщение от DynkanMaclaud
рони,
Teamur, исправил

ок

Teamur 31.01.2016 20:24

DynkanMaclaud, спасибо
Практически как надо.
Осталось это:
Первый клик -> Отводим курсор -> Выводим за контейнер ->

-> синюю область нужно скрыть, когда курсор покидает контейнер, при условии, что второй клик еще не совершен.
При этом зеленый элемент останется зеленым.
Тем самым мы показываем, что пользователь выбрал начальный элемент, но еще не указал конечный, а так как курсор выведен за контейнер, зачем показывать синьку. Роль синей области - визуализация выделения, когда курсор находится в пределах контейнера
Если же выделение создано (есть и зеленый и красный элементы), то и синька останется даже если курсор покинет контейнер.

DynkanMaclaud 31.01.2016 20:37

Teamur,
не понял я что-то, тоесть события mouseover вообще не должно быть? или синяя область должна только быть на том элементе на который наведен курсор?


Часовой пояс GMT +3, время: 18:50.