web-dev-qa-db-fra.com

jQuery - images déplaçables sur iPad/iPhone - comment intégrer event.preventDefault () ;?

J'utilise jQuery, jQuery UI et jQuery mobile pour créer une application Web pour iPhone/iPad. Maintenant, je crée des images et elles devraient pouvoir être déplacées, alors j'ai fait ceci:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Drag - Test</title>
        <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>
    </head> 
    <body>
    <div>
        <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>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $(".draggable").draggable();
    });
</script>
</html>

Ici, vous pouvez voir l’exemple en direct: http://jsbin.com/igena4/

Le problème est que toute la page veut faire défiler. J'ai cherché dans les exemples HTML5 d'Apple et constaté que cela empêchait le défilement de la page, de sorte que l'image puisse être déplacée:

...
onDragStart: function(event) {
    // stop page from panning on iPhone/iPad - we're moving a note, not the page
    event.preventDefault();
    ...
}

Mais le problème est pour moi, comment puis-je l'inclure dans mon jQuery? Où puis-je obtenir event?

Meilleures salutations.

jqueryhtmljquery-uimulti-touchjquery-mobile
15
Tim

Essayez cette bibliothèque

https://github.com/furf/jquery-ui-touch-punch

Suivez simplement ces étapes simples pour activer les événements tactiles dans votre application utilisateur jQuery :

  1. Incluez jQuery et jQuery UI sur votre page.

    <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

  2. Inclure Touch Punch après l'interface utilisateur jQuery et avant sa première utilisation.

    Notez que si vous utilisez les composants de jQuery UI, Touch Punch doit être inclus après jquery.ui.mouse.js, car Touch Punch Modifie son comportement.

    <script src="jquery.ui.touch-punch.min.js"></script>

  3. Il n'y a pas de 3. Il suffit d'utiliser l'interface utilisateur de jQuery comme prévu et de le regarder au bout d'un doigt.

    <script>$('#widget').draggable();</script>
22
JE42

J'ai trouvé une solution qui fonctionne sur les navigateurs de bureau et iOS Safari sur iPad et iPhone: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Il vous suffit de télécharger et d'intégrer le fichier JavaScript, c'est tout.

5
Tim

jQuery 1.9 le fera pour vous.

Voici un lien vers le RC: http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

3
thatmiddleway

Je suppose que ça ressemblerait à ça

$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });

Je ne sais pas si cela devrait être document ou juste 'body'

MODIFIER

Je ne sais pas d'où vous avez pris cet exemple de code, mais il semble toujours bloquer tout déplacement. Essayez si cela aide - cela devrait empêcher la formation de bulles, donc si le défilement fonctionne avec le nœud du document - l'événement ne devrait pas y arriver. [Je ne peux toujours pas l'essayer sur des pommes]

$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });
3
naugtur

Vous devriez simplement aller regarder le Doc de jquery - http://jqueryui.com/demos/draggable/#events

Votre callback pour l'événement de démarrage doit être raccroché lorsque vous appelez la méthode déplaçable, comme pour tous les autres jQuery, il existe toujours un paramètre permettant de transmettre des objets contenant les callbacks. Essayez d'appeler preventDefaut dans le rappel de démarrage.

$( "#draggable" ).draggable({
        start: function(e) {
            e.preventDefault();
            counts[ 0 ]++;
            updateCounterStatus( $start_counter, counts[ 0 ] );
        },
        drag: function() {
            counts[ 1 ]++;
            updateCounterStatus( $drag_counter, counts[ 1 ] );
        },
        stop: function() {
            counts[ 2 ]++;
            updateCounterStatus( $stop_counter, counts[ 2 ] );
        }
    });
0
Developer IT