glisser-déposer sur l'écran tactile
J'ai été la recherche d'un guide clair sur la façon dont ces événements et maintenant je suis encore plus confus que lorsque j'ai commencé.
Certaines fonctionnalités de mon site se font glisser-déposer. Actuellement, les appareils mobiles (ou quoi que ce soit, sans une souris) sont pris en charge par l'avoir à l'utilisateur de sélectionner l'élément, appuyez sur le bouton "déplacer", puis touchez le point de chute. Alors que cela fonctionne très bien (les éléments sont sur une grille visible), ce n'est pas exactement aussi convivial que de glisser.
Ma première idée est que, où que j'attribuer element.onmousedown
, element.onmousemove
et element.onmouseup
je peux tout simplement aussi attribuer le même gestionnaire de element.ontouchstart
, element.ontouchmove
et element.ontouchend
respectivement.
Cependant, qui laisse les questions suivantes:
- Comment puis-je obtenir les coordonnées du point de contact, et quelle est-elle relative?
- Sera la vue panoramique (l'action par défaut de glissement) et, si oui, est que annulable?
- Comment puis-je éviter d'interférer avec le multi-touch des actions telles que le pincement pour zoomer si un doigt se trouve sur un élément déplaçable?
OriginalL'auteur Niet the Dark Absol | 2012-08-05
Vous devez vous connecter pour publier un commentaire.
Vous pouvez déterminer des coordonnées par l'appareil de mesure de largeur/hauteur (à la fenêtre.innerHeight/fenêtre.innerWidth).
Cet article est un bon point de départ pour les événements tactiles et leur remplaçant:
http://www.html5rocks.com/en/mobile/touch/
Gestes Multi-touch ne devrait pas interférer avec les éléments déplaçables. Vous pouvez utiliser le conditionnel dans vos gestionnaires d'événements s'ils interfèrent:
(gestionnaire d'événement)
if (event.touche === 1) gérer l'événement
OriginalL'auteur joewright
Les autres réponses de mieux répondre à la question d'origine, mais pour la postérité qui, comme moi, de trouver ce lien en essayant de faire un existant cliquer/glisser (souris) de la fonction de travail sur écrans tactiles, c'est un très bare bones solution.
Si vous êtes en train d'ajouter des écouteurs d'événement, vous pouvez ajouter un correspondant "évènements touchstart' ligne 'mousedown', comme ceci:
Faire la même chose pour n'importe quel événement mousemove (touchmove) et mouseup (touchend).
Au sein de vos fonctions, quand vous obtenez les coordonnées de la souris, utiliser:
De cette façon, il vérifie la présence d'un clic de la souris et faites-le glisser d'abord, puis si c'est pas défini, il semble pour l'interaction tactile.
Comme je l'ai dit, très barebones, mais il a travaillé pour me faire.
OriginalL'auteur Josiah
Voici un court résumé sur les différences entre les mobiles et de bureau à l'écran des coordonnées: Quelle est la différence entre screenX/Y, clientX/Y et pageX/Y?
Et un exemple de mise en œuvre de la
touchmove
écouteur d'événement:OriginalL'auteur Simo Endre