web-dev-qa-db-fra.com

HTML Drag and Drop sur les appareils mobiles

Lorsque vous ajoutez un glisser-déposer à une page Web à l'aide de JavaScript, tel que l'interface utilisateur de jQuery déplaçable et déposable, comment cela fonctionne-t-il lorsqu'il est affiché via un navigateur sur un périphérique mobile - où les actions à l'écran tactile pour faire glisser sont interceptées téléphone pour faire défiler la page, etc.?

Toutes les solutions sont les bienvenues ... Mes pensées initiales sont les suivantes:

  1. Disposez d'un bouton pour les appareils mobiles qui "soulève" l'élément à faire glisser, puis demandez-leur de cliquer sur la zone dans laquelle ils souhaitent déposer l'élément.

  2. Ecrivez une application qui fait cela pour les appareils mobiles plutôt que d'essayer d'obtenir que la page Web fonctionne avec eux!

  3. Vos suggestions et commentaires s'il vous plaît.

MISE À JOUR: Bounty

Si quelqu'un peut me dire comment faire fonctionner le glisser-déposer dans une page Web sur un appareil mobile, sans recourir aux points 1 et 2 ci-dessus, j'aurai une magnifique prime de 50 reps à votre façon!

javascripthtmljquery-uimobile-devices
83
Fenton

jQuery UI Touch Punch résout tout. 

C’est un support d’événement tactile pour jQuery UI. Fondamentalement, il ne fait que relier les événements tactiles à jQuery UI . Testé sur iPad, iPhone, Android et autres appareils mobiles tactiles . J'ai utilisé jQuery UI triable et fonctionne à merveille.

http://touchpunch.furf.com/

97
vichsu

Un nouveau polyfill permet de convertir les événements tactiles en glisser-déposer, de sorte que HTML5 Drag And Drop est utilisable sur mobile.

Le polyfill a été introduit par Bernardo Castilho le ce post .

Voici un demo de ce post.

Cet article présente également plusieurs considérations sur la conception du remplissage.

19
remdevtec

J'avais besoin de créer un glisser-déposer + rotation qui fonctionne sur le bureau, mobile, tablette, y compris Windows Phone. Le dernier a compliqué les choses (événements mspointer vs. touch).

La solution est venue de The great Greensock library

Il a fallu quelques sauts à travers des cerceaux pour rendre le même objet glissable et rotatif, mais cela fonctionne parfaitement

7
Tomer Almog

La version bêta de Sencha Touch prend en charge le glisser-déposer.

Vous pouvez vous référer à leur Exemple DnD . Soit dit en passant, cela ne fonctionne que sur les navigateurs Webkit.

Intégrer cette logique dans une page Web sera probablement difficile. Si je comprends bien, ils désactivent tous les panoramas de navigateur et implémentent des événements de panoramique entièrement en javascript, permettant une interprétation correcte du glisser-déposer.

Update: l'exemple de lien d'origine est mort, mais j'ai trouvé cette alternative:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

7
Joeri Sebrechts

Jquery Touch Punch est excellent, mais il désactive également toutes les commandes de la division déplaçable. Pour éviter cela, vous devez modifier les lignes ...

changement

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

lire

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

ajoutez autant de ors que vous le souhaitez pour chacun des éléments que vous souhaitez "déverrouiller"

J'espère que ça aide quelqu'un

1
tedbaker

La bibliothèque Sortable JS library est compatible avec les écrans tactiles et ne nécessite pas jQuery.

La façon dont il gère les écrans tactiles vous oblige à toucher l'écran pendant environ 1 seconde pour commencer à faire glisser un élément.

Ils présentent également un test vidéo indiquant que cette bibliothèque est plus rapide que JQuery UI Sortable.

0
Zoup

voici ma solution:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
0
Alper Aydingül