4 votes

Possibilité de faire glisser plus d'un élément sur une page web avec jQuery

Je crée une application web avec HTML5, CSS3 et jQuery, jQuery UI et jQuery Mobile. J'ai maintenant un petit exemple (exemple : http://jsbin.com/ayoba4/2 )

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
        <!-- UPDATE: I USE THIS PLUGIN: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ -->
        <meta charset=utf-8 />
        <title>Drag Test</title>
    </head>
    <body>
        <div style="width:500px;height:500px;border:1px solid red;">
            <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
            <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
        </div>
    <script>
        $(document).ready(function() {
            $(".draggable").draggable();
        });
    </script>
    </body>
</html>

J'ai donc deux images qui doivent pouvoir être déplacées. Je teste cela sur mon iPad et une seule image à la fois est déplaçable. Mais l'iPad devrait supporter jusqu'à 11 doigts, alors pourquoi n'est-ce pas possible et que puis-je faire pour résoudre ce problème ? Ou est-ce que cela fonctionne avec vos appareils multitouch (iPhone, iPad, téléphones portables avec Android, ou écran multitouch) et que je fais quelque chose de mal (paramètres) ? http://jsbin.com/ayoba4/2 ?

Je vous remercie d'avance et vous prie d'agréer, Madame, Monsieur, l'expression de mes salutations distinguées.

2voto

Ahmed Nuaman Points 2816

Vous pouvez le faire, mais sans utiliser la fonction draggable() de jQuery. La façon dont je l'ai fait est d'utiliser ontouchstart et ontouchmove car ces événements vous donnent un tableau des x,y de l'événement en cours, lisez plus sur la méthode Documentation Safari .

0voto

rapadura Points 1920

Voir cet article http://www.crunchgear.com/2009/06/30/be-still-my-heart-multi-touch-tab-switching-in-firefox/ et essayez d'activer le multitouch dans Firefox, vous pourrez alors déboguer votre application ? Vous devez d'abord vous assurer que votre navigateur prend en charge le multitouch, puis vous pouvez consulter les plugins jQuery à cet effet.

0voto

Kyle Points 1091

JQuery Mobile est encore en phase alpha, le mieux est donc d'attendre qu'ils implémentent cette fonctionnalité. Vous pouvez également vous rendre sur le site Forum JQuery-Mobile et posez-leur vous-même la question ;).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X