Блог

Если название двусмысленно, я объясню это лучше сейчас.

Второй ряд изображений можно перетаскивать. Допустим, я перетащу эти изображения на их место — но как я могу знать, что это произошло?

Я использую react-перетаскиваемый для своих перетаскиваемых элементов.

Я думал получить координаты каждого из дивов «Drop here» и просто выполнить некоторые вычисления (например, если 75% ширины и 75% высоты изображения находятся над div, это выбранный ответ).

Это было бы нормально, я думаю, но возникнет еще одна проблема-что, если размер окна изменится?

Это моя составляющая игры:

 import React, { useEffect } from 'react';
import GameDetails from '../GameComponents/GameDetails';
import GameImage from '../GameComponents/GameImage';
import DraggableGameAnswers from './DraggableGameAnswers';

import './css/DraggableGameStart.css';
import DraggableGameSlots from './DraggableGameSlots';

function DraggableGameStart() {
    const draggableGame = React.createRef<HTMLDivElement>();
    
    useEffect(() => (
        console.log(draggableGame.current?.getBoundingClientRect())
    ));
    
    return (
        <div className="draggable-game-content">
            <div className="draggable-game">
                <GameDetails
                    info="test"
                    question="test"
                />
                <GameImage
                    images={[{ imgSrc: './Untitled.png', imgAlt: 'test' },
                    { imgSrc: './Untitled.png', imgAlt: 'test' },
                    { imgSrc: './Untitled.png', imgAlt: 'test' },
                    { imgSrc: './Untitled.png', imgAlt: 'test' }]}
                    className="draggable-game-image"
                />
                <div className="draggable-game-slots-and-answers">
                    <DraggableGameSlots
                        numberOfSlots={4}
                        className="draggable-game-slot-custom4"
                        passedRef={draggableGame}
                    />
                    <DraggableGameAnswers gameSlots={draggableGame}/>
                </div>
            </div>
        </div>
    );
}

export default DraggableGameStart;
 

Dragglegameanswers содержит второй ряд изображений, а DRAGGLEGAMESLOTS содержит первый ряд изображений и раздел «Падение сюда».

Моя идея состояла в том, чтобы взять ряд игровых слотов, используя эту ссылку на draggableGame, передать ее участникам DraggableGameAnswers, а затем у меня будет доступ к слотам.

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

Проблема в том, что если размер окна изменится, игра сломается, потому что ссылка содержит старые координаты — так что это отбрасывает мою идею.

Теперь мой вопрос заключается в следующем:

действительно ли это лучший подход для создания этой игры с перетаскиванием? Мне это кажется довольно примитивным. Если да, то должен ли я реализовать пользовательский крюк, который отправляет новые координаты каждый раз, когда размер окна изменяется?

Спасибо.