HTML Drag And Drop sur les appareils mobiles

Question

HTML Drag And Drop sur les appareils mobiles

Demandé el 3 de Juillet, 2010: Quand la question a-t-elle été
34068 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Lorsque vous ajoutez la fonction glisser-déposer à une page Web à l'aide de JavaScript, comme jQuery UI draggable and droppable, comment faites-vous pour que cela fonctionne lorsqu'il est affiché via un navigateur sur un appareil mobile - où les actions de l'écran tactile pour le glisser sont interceptées par le téléphone pour faire défiler la page, etc.

Toutes les solutions sont les bienvenues... mes premières pensées sont les suivantes :

Disposez d'un bouton pour les appareils mobiles qui "soulève" l'élément à faire glisser, puis demandez-leur de cliquer sur la zone où ils veulent déposer l'élément.
Écrivez une application qui fait cela pour les appareils mobiles plutôt que d'essayer de faire fonctionner la page web sur ces appareils !
Vos suggestions et commentaires s'il vous plaît.

Demandé el 3 de Juillet, 2010 par Steve Fenton

0 votes

Quels sont les appareils que vous ciblez ?

Commenté el 4 de Juillet, 2010 par Marko

30 votes

@Marko - tous. Ce n'est pas le Web si j'exclus quelqu'un.

Commenté el 22 de Janvier, 2012 par Steve Fenton

0 votes

Si vous ne voulez pas du tout de jQuery, jetez un coup d'oeil à ceci github.com/capriza/mobile-touch

Commenté el 7 de Juillet, 2015 par oriharel

Afficher 1 autres commentaires

Answer 1

4 Réponses

Answer 2

102voto

vichsu Points 526

JQuery UI Touch Punch résout tout cela.

Il s'agit d'un support d'événement tactile pour jQuery UI. En fait, il ne fait que renvoyer les événements tactiles à jQuery UI. Testé sur iPad, iPhone, Android et autres appareils mobiles tactiles. J'ai utilisé jQuery UI sortable et cela fonctionne comme un charme.

http://touchpunch.furf.com/

Répondu el 11 de Mai, 2012 par vichsu (526 Points )

4 votes

Ça ne fonctionne pas avec le navigateur Android 4.0 standard. En revanche, il fonctionne sur Chrome mobile.

Commenté el 4 de Novembre, 2012 par Timmmm

0 votes

Doit-on appuyer longuement avant de faire glisser ? parce que lorsque nous utilisons la pleine largeur de l'élément qui peut glisser et que nous voulons faire défiler vers le bas, cela fait automatiquement glisser l'élément.

Commenté el 4 de Février, 2014 par CaffeineShots

1 votes

Assurez-vous que ce soit votre dernière <script> déclaration dans l'en-tête de votre fichier html, en particulier jquery-ui, ou cela ne fonctionnera pas.

Commenté el 5 de Juin, 2014 par whyoz

Afficher 6 autres commentaires

Answer 3

9voto

Tomer Almog Points 66

J'avais besoin de créer un glisser-déposer + rotation qui fonctionne sur le bureau, le mobile, la tablette y compris le téléphone Windows. Le dernier a rendu les choses plus compliquées (mspointer vs événements tactiles).

La solution est venue du grand Bibliothèque de Greensock

Il a fallu sauter à travers des cerceaux pour rendre le même objet déplaçable et rotatif, mais cela fonctionne parfaitement.

Répondu el 2 de Août, 2014 par Tomer Almog (66 Points )

0 votes

Type de licence ? Gratuit ? J'ai consulté le site, mais il semble qu'ils vendent la bibliothèque.

Commenté el 27 de Juin, 2020 par ShanerM13

0 votes

Cela fait 6 ans que je n'ai pas répondu à cette question. Je ne suis pas sûr qu'ils aient changé leur type de licence. C'était gratuit en 2014...

Commenté el 28 de Juin, 2020 par Tomer Almog

0 votes

Je ne sais pas comment j'ai pu oublier ça, mais greensock.com/licensing

Commenté el 29 de Juin, 2020 par ShanerM13

Afficher 1 autres commentaires

Answer 4

7voto

Joeri Sebrechts Points 7483

La version bêta de Sencha Touch est compatible avec la fonction "glisser-déposer".

Vous pouvez vous référer à leur Exemple de DnD . Cela ne fonctionne que sur les navigateurs webkit d'ailleurs.

Il sera probablement difficile d'adapter cette logique à une page web. D'après ce que je comprends, ils désactivent tous les panoramiques du navigateur et implémentent les événements de panoramique entièrement en javascript, ce qui permet une interprétation correcte du glisser-déposer.

Mise à jour : le lien de l'exemple original est mort, mais j'ai trouvé cette alternative :
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Répondu el 7 de Juillet, 2010 par Joeri Sebrechts (7483 Points )

0 votes

C'est très intéressant, je vais donc le télécharger et l'essayer. J'ai testé sur Android et cela fonctionne en grande partie, il ne me reste plus qu'à examiner les détails.

Commenté el 7 de Juillet, 2010 par Steve Fenton

6 votes

D'accord, je n'utiliserai probablement pas cette bibliothèque en particulier (car elle fait plus de 200 Ko une fois minifiée), mais je peux utiliser les concepts qu'elle contient pour me faire une idée. L'idée générale est que vous faites en sorte que votre page ne puisse pas être interprétée comme étant plus grande que la taille de l'écran, ce qui trompe le navigateur mobile en l'empêchant d'intercepter les glissements/glissades !

Commenté el 8 de Juillet, 2010 par Steve Fenton

1 votes

Sohnee, nous ajoutons un constructeur pour Touch 1.0 qui supprime les parties inutilisées de la bibliothèque, ce qui réduira considérablement l'encombrement. De plus, gzippée, la bibliothèque complète fait 50-80k.

Commenté el 2 de Août, 2010 par Michael Mullany

Answer 5

1voto

Mike Points 11

http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

Voir ci-dessus. Le glisser-déposer fonctionne sur le navigateur de mon appareil iOS.

Répondu el 20 de Janvier, 2012 par Mike (11 Points )

HTML Drag And Drop sur les appareils mobiles

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

HTML Drag And Drop sur les appareils mobiles

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: