Glisser-déposer HTML sur les appareils mobiles

Lorsque vous ajoutez un glisser-déposer à une page Web à l'aide de JavaScript, comme jQuery UI draggable and droppable, comment le faire fonctionner 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 réflexions sont:

1. Avoir un bouton pour les appareils mobiles qui "soulève" l'élément à faire glisser, puis les amener à cliquer sur la zone sur laquelle ils souhaitent déposer l'élément.

2. Écrivez une application qui le fait pour les appareils mobiles plutôt que d'essayer de faire fonctionner la page Web sur eux!

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

jQuery UI Touch Punch résout tout cela.

C'est une prise en charge des événements tactiles pour l'interface utilisateur jQuery. Fondamentalement, il ne fait que renvoyer l'événement tactile à l'interface utilisateur jQuery. Testé sur iPad, iPhone, Android et autres appareils mobiles tactiles. J'ai utilisé jQuery UI triable et cela fonctionne comme un charme.

http://touchpunch.furf.com/

Il existe un nouveau polyfill pour traduire les événements tactiles en glisser-déposer, de sorte que le glisser-déposer HTML5 est utilisable sur mobile.

Le polyfill a été présenté par Bernardo Castilho sur ce post .

Voici une démo de ce post.

Le message présente également plusieurs considérations sur la conception du folyfill.

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

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

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

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

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 de la grande bibliothèque Greensock

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

Vous pourriez aussi bien essayer le polyfill glisser-déposer de Tim Ruffle , certainement similaire à celui de Bernardo Castilho (voir la réponse @remdevtec).

Faites simplement npm install mobile-drag-drop --save(autres méthodes d'installation disponibles, par exemple avec bower)

Ensuite, toute interface d'élément reposant sur la détection tactile devrait fonctionner sur mobile (par exemple en faisant glisser uniquement un élément, au lieu de faire défiler + faire glisser en même temps).

Jquery Touch Punch est génial, mais ce qu'il fait également est de désactiver tous les contrôles sur le div déplaçable afin d'éviter cela, vous devez modifier les lignes ... (au moment de l'écriture - ligne 75)

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

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');
    }
});

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

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

En outre, ils présentent un test vidéo montrant que cette bibliothèque s'exécute plus rapidement que JQuery UI Sortable.