Мобильная сеть: просмотр текущей позиции касания пальца пользователя

Question

Я создаю веб-приложение React, и мне любопытно, как получить текущую позицию касания, когда пользователь держит палец в мобильном Интернете.

В идеале я хотел бы выполнить то же поведение, что и на рисунке ниже, но в мобильной сети, где пользователь может коснуться поля (div) и, удерживая палец на экране, переместить его в другое поле, чтобы выделить все из них. GIF ниже является версией для рабочего стола и работает с событиями мыши, onMouseDown, onMouseUp, onMouseEnter.

Должен ли я использовать событие перетаскивания для достижения этой цели?

Код работает на рабочем столе:

class Block extends PureComponent {
    render() {
        const {
            index,
            isSelectingBlocks, setIsSelectingBlocks,
            firstBlock, setFirstBlock,
            lastBlock, setLastBlock,
        } = this.props;

        return (
            <StyledTimeBlock
                className={`block ${this.props.className}`}
                onFocus={() => console.log('focusing', index)}
                onMouseDown={() => {
                    console.log('mouse down');
                    if (isBetweenTimes(index, firstBlock, lastBlock)) {
                        return;
                    }

                    setIsSelectingBlocks(true);
                    setFirstBlock(index);
                    if (firstBlock) {
                        setLastBlock(null);
                    }
                }}
                onMouseEnter={() => {
                    if (isSelectingBlocks) {
                        if (typeof firstBlock === 'number') {
                            setLastBlock(index);
                        }
                    }
                }}
                onMouseUp={() => {
                    console.log('mouse up');
                    // if user was moving backwards on the grid
                    if (!isSelectingBlocks) {
                        return;
                    }

                    if (typeof lastBlock === 'number' && lastBlock < firstBlock) {
                        setFirstBlock(lastBlock);
                        setLastBlock(firstBlock);
                        setIsSelectingBlocks(false);
                        return;
                    }

                    setLastBlock(index);
                    setIsSelectingBlocks(false);
                }}
            >
                <InnerBorder
                    betweenNewStartEndTime={isBetweenTimes(index, firstBlock, lastBlock)}
                >
                </InnerBorder>
            </StyledTimeBlock>
        )
    }
}

Спасибо!