Сделать область регистрации касания «шире» без изменения параметров самого элемента?

Question

[JyriG]

Итак, у меня есть куча элементов с шириной 1-5 пикселей, они очень тонкие. Их в конечном приложении будут "перетаскивать" пальцами пользователи. Речь идет о приложении для строителей. Эти тонкие элементы - не что иное, как балки.

Однако проблема в том, что эти балки очень трудно схватить касанием, нужно раз 20-30 пытаться до нее дотронутся. Проблема решается расширением элемента через CSS, однако портит интерфейс приложения и пр. position: absolute тоже не спасает.

Надо бы сделать область регистрации касания "шире" без изменения параметров самого элемента. Как это сделать? Псевдоселекторы типа :before? или какой-то магический плагин поможет?

Answer 1

[Вадим]

Псевдоселекторы псевдоэлементы типа :before

Но тут ещё стоит учесть ситуацию, когда 2 элемента окажутся рядом друг с другом. Что тогда? Ну, очевидно, один из них будет пеекрывать другой по z-index. Но вероятность что это будет не тот что нужно - высока. В итоге пользоватею нужно будет сначала убрать перекрывающий элемент, поправить целевой, вернуть обратно перекрывающий, а если их несколько?

Поэтому варианта я вижу 3 и их лучше всего совместить:
1) Расширить зону через псевдо
2) Делать выбор элемента по тапу. То есть тапнул на элемент, он выделился - и потом с ним взаимодействуетшь. Если нессколько элементов лежат друг под другом, то выбирать последовательно на каждый тап следующий элемент. Первый тап выбирает самый верхний, второй тап выбирает лежаший под и так далее.
Найти все элементы в координатах тапа поможет метод https://developer.mozilla.org/en-US/docs/Web/API/D...
3) Сделать условный select в котором можно будет выбрать нужный элемент. В идеале - если каждый элемент будет как-то уникально промаркрован.

Ну и ещё можно дать возможность зумить чтобы элементы становились больше, что облегчит взаимодействие с ними