HTML5 Drag and Drop API sur les appareils à écran tactile
je me demandais juste si L'API HTML5 pour Drag and Drop incluait le support des écrans tactiles.
je pensais à l'iPhone, mais je sais que ce n'est pas encore pris en charge. Je me demandais si C'était juste un rattrapage de la part D'Apple, pour supporter HTML5 drag and drop sur Safari mobile, mais je pensais aussi que peut-être L'API HTML5 N'était pas assez puissante pour cela, mais je doute fortement que.
Que Diriez - vous sur une tablette d'ordinateur portable à écran tactile standard ou le genre, Je ne en avoir un donc je ne peux pas tester mais j'imagine que le support est inclus parce que, pour autant que je sache, cette interface de table remplace juste le contrôle de la souris, donc, en ce qui concerne le navigateur, l'utilisateur final est vraiment juste en utilisant une souris.
des idées?
3 réponses
vieux fil mais comme j'ai de l'expérience et que c'est toujours un problème, je vais essayer...
Touchez et faites-le glisser/déposer ne joue pas vraiment bien ensemble. Considérer que, pour glisser-déposer, vous avez un implicite de la souris vers le bas => déplacer la souris => souris séquence des événements. Dans un environnement tactile, vous n'avez pas seulement les événements touchstart, touchmove et touchend standard, mais vous avez aussi des gestes réels qui ont des significations spécifiques sur diverses plateformes. Ces gestes sont des combinaisons les événements tactiles, leur ordre et de leur calendrier.
alors comment faire glisser un élément en utilisant le toucher? En capturant le touchstart et le touchmove? Aucun. En raison du problème du doigt de graisse, presque chaque événement de contact a à la fois un touchstart et touchmove. Vous pouvez également avoir deux touchstarts avec un seul touchmove occasionnellement avec un écran sale.
pourquoi ne pas capturer touchstart et attendre de voir si l'Utilisateur a bougé une certaine distance? Non, le problème, c'est que l'utilisateur va voir le "bug" quand il a déplacé son doigt 15 pixels (ou n'importe quelle distance) et rien ne se passe et puis l'élément se brise soudain à sa position du doigt. La réaction normale est de lever le doigt, ce qui dans ce scénario déclencherait une chute, la mauvaise réponse.
en fin de compte, essayer de développer une interface où certains éléments sont stationnaires et d'autres peuvent, mais n'ont pas à l'être, draggable essaie d'intégrer un environnement de bureau dans un appareil tactile. Les paradigmes ne sont pas équiper.
Mieux de regarder les différents cadres et utiliser les gestes.
Il existe quelques événements HTML5 natifs qui fonctionnent dans WebKit (Chrome & Safari) ... seulement les versions mobiles. Le nom de ces événements est touchstart, touchmove, touchend, touchcancel
Un exemple pour déplacer un élément est:
$(document).bind("touchstart", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;
$("#element").css({top: y, left: x});
});
Plus d'informations: https://developer.apple.com/documentation/webkitjs/touchevent
BTW je préfère travailler avec webkit-transform (propriétés CSS) parce qu'il a une meilleure performance.