web-dev-qa-db-fra.com

Glisser-déposer sur les appareils tactiles

Je remarque que les applications tactiles utilisent rarement l'idiome "drag n drop" (dnd), et que le glisser-déplacer est presque toujours utilisé pour le défilement.

Y a-t-il une raison à cela? Est-il déroutant ou "faux" d'utiliser dnd au toucher? Qu'en est-il également du défilement: peuvent-ils être mélangés efficacement?

touch-screenscrollingdrag-n-drop
9
aaaidan

Je pense qu'il y a plusieurs raisons à cela.

  1. Tout d'abord, il est difficile de le faire si vous avez déjà implémenté le défilement. Il est possible de le faire, mais cela nécessiterait des solutions telles que des listes où vous pouvez faire défiler dans une direction (par exemple, verticale), puis utiliser l'autre direction pour "détacher" l'élément de la liste, après quoi vous pouvez le faire glisser dans n'importe quel direction. Ce n'est pas une action triviale à faire, à apprendre ou (hors sujet ici) à mettre en œuvre.
  2. De nombreuses interfaces tactiles ont été conçues pour les petits écrans. Le glisser-déposer n'a souvent aucun sens sur ces écrans, car cela fonctionne généralement en affichant deux ou plusieurs conteneurs d'éléments entre lesquels vous pouvez glisser-déposer. Cependant, ces petits écrans sont généralement conçus de manière à ce qu'il n'y ait n qu'un tel conteneur visible à tout moment. Pourtant, sur des tablettes ou d'autres systèmes tactiles à écran plus grand, il pourrait être utilisé.
7
André

Un autre aspect qui n'a pas été mentionné est la perte de la fonctionnalité Long Press en utilisant un champ de glisser-déposer. Surtout dans Android, la presse longue est venue pour représenter le clic droit du monde tactile. Lorsqu'une souris a gauche et droite, le toucher n'a que court et long.

3
Will Meldon

Vous pouvez utiliser event.preventDefault lors de la navigation et de la suppression ou un touchHold afin que vous puissiez avoir à la fois le défilement et le glisser/déposer.

L'astuce consiste à lier les événements de la souris aux événements tactiles.

https://mobiforge.com/design-development/touch-friendly-drag-and-drop

Double tap est délicat, mais totalement faisable, voici celui qui a fonctionné pour moi.

https://Gist.github.com/attenzione/7098476

Lorsque vous utilisez un événement de double clic, ajoutez simplement un événement de doubletap pour cela.

De cette façon, vous pouvez utiliser le double appui, glisser/déposer et activer le défilement lorsque vous ne touchez pas Maintenir ou glisser-déposer.

MISE À JOUR: Si vous avez un élément .draggable, vous pouvez facilement obtenir le glissement pour lancer le défilement automatique en utilisant une option de défilement de scroll: true.

Exemple:

$('.className').draggable({
                helper: 'clone',
                scroll: true 
            });
0
Dmitri Larionov