web-dev-qa-db-fra.com

Qu'est-ce qu'une petite alternative d'écran pour glisser-déposer?

J'ai une question de glisser-déposer qui semble bonne en plein écran, mais je ne peux pas la réduire aussi bien pour les écrans de téléphone. La page navigue de haut en bas et propose diverses vérifications des connaissances au fur et à mesure.

drag and drop - full screen

Ceci est l'image plein écran. Il a quatre colonnes et elles s'alignent sur trois, deux et une lorsque la taille de la fenêtre est réduite. Mais si vous avez la question sur un téléphone, elle sera sur une colonne et ressemblera à ceci

drag and drop - one column

Cela signifie que si vous souhaitez faire glisser l'une des réponses du bas vers l'un des espaces en haut, vous devrez faire défiler vers le haut.

Quelles alternatives à cette disposition fonctionneraient sur un écran plus petit. J'envisage actuellement de faire défiler horizontalement la section des réponses à mesure que la taille de l'écran change. Quelque chose comme l'image ci-dessous.

enter image description here

Où la zone grise peut défiler vers la gauche et la droite et la zone blanche peut défiler vers le haut et vers le bas. Existe-t-il des moyens plus intuitifs de mettre en page/interagir avec cela?

1
firefields

Je pense à quelque chose comme ça:

enter image description hereenter image description hereenter image description here

Qui est inspiré du menu tarte (curcular ou radial) .
enter image description here

2
Alexey Kolchenko