Je cherche un guide clair sur la façon dont ces événements fonctionnent et que je suis maintenant plus confus que lorsque j'ai commencé.
Certaines fonctionnalités de mon site impliquent glisser-déposer. Actuellement, les appareils mobiles (ou quoi que ce soit sans souris) sont supportés par la sélection de l'utilisateur, appuyez sur la touche "Déplacer", puis touchez le point de dépôt. Bien que cela fonctionne assez bien (les articles sont sur une grille visible), ce n'est pas exactement aussi convivial que glisser.
Ma compréhension initiale est que, partout où j'attribuerais Cependant, cela laisse les questions suivantes:
ollement.onmousedown , element.onmousemove et ollement.onmouseup i peut aussi affecter la Même gestionnaire à élément.ontouchstart , élément.ontouchmove et élément.ontouchend respectivement.
3 Réponses :
Vous pouvez déterminer les coordonnées en mesurant la largeur / la hauteur du périphérique (fenêtre.innerheight / window.innerwidth).
Cet article est un bon point de départ pour les événements tactiles et les dérober: http://www.html5rocks.com/fr/mobile/touch/
Les gestes multi-touchs ne doivent pas interférer avec les éléments de dragage. Vous pouvez utiliser des conditionnels dans vos manutentionnaires d'événement si elles interfèrent: (gestionnaire d'événements) Si (Event.Touches === 1) Manipulez l'événement
Voici un bref résumé sur les différences entre les coordonnées d'écran mobile et de bureau: Quelle est la différence entre Scricx / Y, clientX / Y et PageX / Y?
et un exemple de travail de mise en œuvre du TouchMove Code> Écouteur d'événement: P> this.canvas.addEventListener("touchmove", function(e) {
e.preventDefault();
touchPosition(e);
}, false);
var getCanvasPos = function(el) {
var canvas = document.getElementById(el) || this.getCanvas();
var _x = canvas.offsetLeft;
var _y = canvas.offsetTop;
while(canvas = canvas.offsetParent) {
_x += canvas.offsetLeft - canvas.scrollLeft;
_y += canvas.offsetTop - canvas.scrollTop;
}
return {
left : _x,
top : _y
}
};
var touchPosition = function(e) {
var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
return {
x : mouseX,
y : mouseY
};
};
Les autres réponses s'adressent mieux à la question initiale, mais pour la postérité qui, comme moi, trouvez ce lien essayant de créer un fonctionnement de fonction de clic / glisser (souris) existant sur des écrans tactiles, il s'agit d'une solution à ossements très nus.
Si vous ajoutez des auditeurs d'événements, vous pouvez ajouter une ligne "TouchStart" correspondante à votre "MouseDown" comme: fais de la même manière pour n'importe quel MouseMove (Touchmove) et MouseUp (touchend). Dans vos fonctions, lorsque vous obtenez les coordonnées de la souris, utilisez: de cette façon, il vérifie un clic de souris et Faites glisser d'abord, alors si cela est indéfini, il cherche une interaction tactile. Comme je l'ai dit, très barebones, mais cela a fonctionné pour me faire démarrer.
Il convient de noter qu'il y a une très bonne raison pour presque aucun support natif de Drag & Drop in Mobiles: il peut interférer avec le défilement. Donc, si vous élargissez votre propre système de glisser-déposer par Persuado sur des appareils mobiles, faites-vous absolument certain qu'il n'y a pas de barreaux de défilement dans la direction que les éléments de glisser sont traînés. Sinon, une personne peut tenter de faire défiler la page et de finir par faire glisser l'un de vos dragghables. Ou vice versa.