API Drag and Drop HTML5 sur les appareils à écran tactile
Je me demandais simplement si l'API HTML5 pour glisser-déposer incluait la prise en charge des écrans tactiles.
Je pensais à l'iPhone, mais je sais que ce n'est pas encore pris en charge. Je me demandais si cela ne faisait que rattraper Apple, pour prendre en charge le glisser-déposer HTML5 sur Safari mobile, mais je pensais également que l'API HTML5 n'était pas assez puissante pour cela, mais j'en doute fortement.
Que diriez-vous d'une tablette d'ordinateur portable à écran tactile standard ou similaire, je n'en ai pas 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 simplement le contrôle de la souris, donc , en ce qui concerne le navigateur, l'utilisateur final utilise simplement une souris.
Des pensées?
Vieux fil mais depuis que j'ai une certaine expérience et c'est toujours un problème je vais lui donner un coup de feu ...
Le toucher et le glisser/déposer ne jouent pas vraiment bien ensemble. Considérez que pour le glisser-déposer, vous avez une séquence implicite mouse-down => mouse-move => mouse-up d'événements. Dans un environnement tactile, vous avez non seulement les événements standard de démarrage, de déplacement et de toucher, mais vous avez également des gestes réels qui ont des significations spécifiques sur diverses plates-formes. Ces gestes sont des combinaisons d'événements tactiles, leur ordre et leur timing.
Alors, comment feriez-vous glisser un élément en utilisant le toucher? En capturant le touchstart et le touchmove? Non. En raison du problème des gros doigts, presque chaque événement tactile a à la fois un démarrage tactile et un déplacement tactile. Vous pouvez également avoir deux démarrages tactiles avec un seul mouvement tactile de temps en temps avec un écran sale.
Que diriez-vous de capturer le démarrage tactile, puis d'attendre pour voir si l'utilisateur a parcouru une certaine distance? Non, le problème est que l'utilisateur verra le "pépin" quand il aura déplacé son doigt de 15 pixels (ou quelle que soit la distance) et que rien ne se passera, puis que l'élément s'accroche soudainement à sa position de doigt. La réaction normale est de lever le doigt, ce qui dans ce scénario déclencherait une baisse, la mauvaise réponse.
En fin de compte, en essayant de développer une interface où certains éléments sont stationnaires et d'autres peuvent, mais ne doivent pas l'être, draggable essaie d'adapter un environnement de bureau à un appareil tactile. Les paradigmes ne correspondent pas.
Mieux vaut regarder les différents cadres tactiles et utiliser les gestes intégrés.
Il existe des événements HTML5 natifs qui fonctionnent dans WebKit (Chrome et Safari) ... uniquement dans 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) car il a de meilleures performances.
Ayant le même problème, voici quelques solutions gratuites :