Analyse de la difficulté des actions glisser-déposer dans jQuery mobile browser_jquery

Cet article utilise un exemple pour analyser la difficulté du glisser-déposer dans les navigateurs mobiles jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Au départ, je voulais implémenter un bouton de contrôle qui peut être déplacé à volonté comme un iPhone dans la page Web mobile, mais à la fin j'ai découvert que tout cela était en vain,

Bien que les actions glisser-déposer soient courantes dans les navigateurs mobiles, il est impossible d'implémenter des composants pouvant être glissés-déposés dans les navigateurs mobiles.

Voyons d'abord comment les actions de glisser-déposer sont effectuées sur les pages Web du PC,

Tout d'abord, nous avons un bouton qui agit lorsque vous cliquez dessus. Si vous continuez à appuyer dessus, vous pouvez le faire glisser à volonté, tout comme le bouton de commande de l'iPhone que vous pouvez faire glisser à volonté

.

Il n'est pas facile d'écrire le calque gris comme indiqué ci-dessus,

Tout d'abord, nous devons changer l'attribut position du calque gris en absulte. Ensuite, le point principal du travail à implémenter dans le script jquery est de distinguer la paire d'actions click et mousedown mouseup, car le clic est. à l'origine égal à mousedown mouseup, mais d'accord, après un certain temps, la dissociation efface immédiatement la liaison du calque à l'action cilck, indiquant au système que l'action après mousedown n'a rien à voir avec le clic. Voir le code réel suivant : <.>

Copier le code Le code est le suivant :

 
 
 
 
jqdrag 
 
 
≪/tête> 
 
 

out

 
 
 

La raison pour laquelle nous devons écrire un événement mouseout est la même que celle de l'article précédent [JQuery implémente un événement de déclenchement d'un bouton en appuyant longuement] pour empêcher le bug dans le navigateur d'être noirci et d'échapper au jugement de la souris. .
Ce qui précède semble très parfait, car il a été testé sur tous les principaux navigateurs PC et est parfaitement compatible avec IE8. C'est vraiment pittoresque,

.

Cependant, dès qu'il s'agit du téléphone portable, il y a un gros problème,

Uniquement en mode débogage du téléphone mobile dans le navigateur Google, il ne peut pas être utilisé avant d'être sur un vrai appareil !

Il n'y a aucun problème avec l'événement click de jquery dans les navigateurs mobiles. Cependant, l'événement d'appui long entre en conflit avec la fonction de clic droit du système sur le téléphone, même s'il est remplacé par .on("taphold" dans jquery mobile. , function (){}); événement ou ajoutez e.preventDefault() au mousedown ci-dessus ; IE utilise window.event.preventDefault(); Je désactive le menu intégré du navigateur mobile et je ne peux utiliser que long La fonction d'appui est conservé, et il n'est pas nécessaire de penser au glisser, car la fonction principale du glisser est l'action mousemove, et les navigateurs mobiles ne prennent pas du tout en charge l'action mousemove().

Donc, quelqu'un a protesté, vous pouvez utiliser .draggable() dans jquery ui et l'événement swipe dans jquerymobile, qui est en fait l'événement drag en html5 !

Cependant, toutes les solutions ci-dessus sont vaines,

Pour .draggable() dans jquery ui, l'événement swipe dans jquerymobile et l'événement drag dans html5, vous pouvez utiliser le mode de débogage mobile du navigateur, et vous constatez que vous ne pouvez pas faire glisser du tout.

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.