jQuery - déplaçable images sur iPad / iPhone - comment intégrer l'événement.preventDefault();?

J'utilise jQuery, jQuery UI et jQuery mobile pour construire une application web pour iPhone /iPad.
Maintenant, je créer des images et ils devraient être déplaçable, j'ai donc 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 vivant: http://jsbin.com/igena4/

Le problème, c'est que la page entière voulez défiler. J'ai cherché dans les Apple HTML5 exemples et trouvé ceci pour éviter le défilement de la page, de sorte que l'image est déplaçable:

...
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 inclure dans mes jQuery? Où puis-je obtenir event?

Meilleures Salutations.

InformationsquelleAutor Tim | 2010-12-20

22

Essayer cette bibliothèque

https://github.com/furf/jquery-ui-touch-punch
Il suffit de suivre ces étapes simples pour permettre de toucher des événements dans votre jQuery
L'INTERFACE utilisateur de l'app:
1. Inclure 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 Touche de Punch après jQuery UI et avant sa première utilisation.
  
  Veuillez noter que si vous utilisez jQuery UI composants, Appuyez coup de poing doivent être inclus après jquery.ui.mouse.js comme Touche de Punch
  modifie son comportement.
  
  <script src="jquery.ui.touch-punch.min.js"></script>
3. Il n'y a pas de 3. Suffit d'utiliser jQuery UI comme prévu et le regarder travailler au contact d'un doigt.
  
  <script>$('#widget').draggable();</script>
- +1 pour la mention de cela, j'ai travaillé beaucoup avec cela et fonctionne très bien avec jquery ui.
- C'est trop cool. Il fonctionne, tout simplement! Juste testé sur Opera Mobile, Firefox/Fennec et Nokia N9 navigateur par défaut. De ces 3 seulement Fennec est un peu maladroit (mais qui fonctionne). Voir exemple ici: m.enux.pl/_tests/jui/demos/droppable/photo-manager.html
- Fonctionne très bien pour moi
- assurez-vous de <script> après <script> jquery ui dans la tête ou s'il ne fonctionne pas...comme toute autre personne à charge, <script> déclarations
- +1 pour touchpunch! Vous avez juste à inclure la bibliothèque et il fonctionne (pour draggability est la seule chose que j'ai testé tout de même).
InformationsquelleAutor JE42
5

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/

Vous n'avez qu'à télécharger et intégrer le fichier JavaScript, c'est tout.
- Ce serait bien de trouver ce qui est exactement le corriger, parce que c'est sûrement appliquée.
- Je pense que c'est fait avec plusieurs preventDefaults. Je n'ai pas prendre un regard plus profond à l'intérieur du code, tout d'abord je suis content que ça fonctionne 🙂
- Wow je savais que vous n'êtes pas le premier à avoir ce problème 🙂
- J'ai pris un coup d'oeil au code, et il est tout simplement génial. Ils ont ajouté listners à des événements qui sont spécifiques à iOS tels que les évènements touchstart, touchmove, touchend et de l'associer à jQuery événements tels que sur, dlbClick, faites glisser et ainsi de suite... jQuery modèle d'événements de fait, c'est très facile à "la carte" de nouveaux événements pour les anciens ! Leur code est bien écrit et avec des commentaires. Vous devriez prendre un coup d'oeil. Pas seulement un couple de preventDefaults 😉 Si vous êtes à la construction d'une application personnalisée pour iOs, je recommanderais avec le droit des événements.
- Mais ce que je ne sais pas encore, est de savoir comment peut se réaliser de deux éléments ou plus sont déplaçables simultanément. J'ai 10 doigts, mais je ne peut utiliser qu'un glisser-déposer.
- ne fonctionne pas/rien ne fonctionne sur android...
InformationsquelleAutor Tim
3

Je suppose que ce serait ressembler à ceci
```
$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });
```
Je ne suis pas sûr si elle devrait être document ou tout simplement 'body'

MODIFIER

Je ne sais pas où vous avez pris que l'exemple de code à partir, mais il semble toujours à bloquer tout en faisant glisser. Essayez si cela permet - il de prévenir bouillonne, donc si le défilement fonctionne avec le nœud de document - l'événement ne devrait pas y arriver. [Je n'ai pas encore essayer sur les pommes]
```
$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });
```
- Les deux ne fonctionne pas, reportez-vous à jsbin.com/igena4/2 et jsbin.com/igena4/3 je ne travaille pas dans l'iPad et je ne peut pas glisser dans un navigateur standard avec la souris plus.
- Ok. Pouvez-vous lier à l'endroit que vous avez trouvé les informations que vous devez lier les preventDefault à onDragStart? Vous pourriez avoir besoin de le lier à une chose en particulier, ou il est trompeur. Je n'ai pas d'écran tactile de l'appareil, donc je ne peux pas l'obtenir avec essais et erreurs.
- essayez sans return false. Je pense que c'était trop.
- Aussi sans return false il ne fonctionne pas. Exactement le même comportement: jsbin.com/igena4/5 - jsbin.com/igena4/6 ne Peut pas glisser avec la souris et de ne pas glisser avec le doigt.
- Je demande encore une fois - où avez-vous trouvé le fragment avec onDragStart?
- Je l'ai pris cet exemple: developer.apple.com/safaridemos/StickyNotes et le fichier JS: developer.apple.com/safaridemos/StickyNotes/resources/notes.js
- Il fonctionne avec une souris, mais pas sur un iPad, voir ici: jsbin.com/igena4/11
- Comme vous pouvez le voir dans le code lié à chaque bouffée liées au gestionnaire d'événement renvoie la valeur false et tous à l'exception de glisser empêcher leurs valeurs par défaut. Vous devez lier à certains plus d'événements et/ou changement de selection de la mise en œuvre un peu. J'aimerais le faire pour vous, juste pour le plaisir de celui-ci si quelqu'un m'a donné un iPad pour jouer avec. Ou vous pouvez poster un lien vers un émulateur pour linux, permettez-moi de le reproduire, et je vais obtenir en janvier. Pas de blague.
- Malheureusement, il n'existe pas de simulateur / émulateur qui ont ce problème. Tous les simulateurs comme code.google.com/p/ibbdemo2 ou pages web, comme les ipadpeek.com prendre des cours à la souris comme le robinet de glisser, et donc il fonctionne.
- Je vais être déconnecté car demain jusqu'à 03.01.11 mais après que nous pourrions avoir une distance de coopération session de codage d'un exemple de travail et d'essais(fait par vous) avec le chat de la rétroaction. Sauf si vous arrivez à vous-même plus tôt, bien sûr 😉
- Merci beaucoup pour votre aide. J'ai trouvé une solution: code.google.com/p/jquery-ui-for-ipad-and-iphone
InformationsquelleAutor naugtur
3

jQuery 1.9 va le faire pour vous.

Voici un lien pour la RC: http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/
- Ce serait bien si ce fichier existe toujours D:
- vous pouvez tester le jquery 1.9 beta ici: blog.jqueryui.com/2012/06/jquery-ui-1-9-beta
- +1 pour l'. 😀
- Le toucher est pas partie de l'INTERFACE utilisateur de jQuery 1.9
InformationsquelleAutor thatmiddleway
0

Vous devez simplement aller regarder les Doc de jquery http://jqueryui.com/demos/draggable/#events

Vous rappel pour le début de l'événement doivent être en jeu lorsque vous appelez la déplaçable méthode, comme avec tous les autres jQuery, il y a toujours un param où vous pouvez passer d'un objet qui contient les rappels. Essayez d'appeler preventDefaut en début de rappel.
```
$( "#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 ] );
        }
    });
```
- Je l'ai déjà fait cette dans le de cette façon: start: function(event) { event.preventDefault(); }, mais alors rien de fonctionne - pas de souris, pas de doigt glisser.
- On dirait que c'est la façon de le faire avec jqueryUI, vous avez juste à jouer avec cela. Ajouter plus de preventDefaults ici et là, d'essayer d'arrêter la bouillonnante sur les différents événements...
- Avez-vous essayez de tenir l'Ipad de défilement avec un doigt et en la faisant glisser avec un autre doigt (d'autre part) ? J'utilise cette astuce souvent sur le site web qui a un div défilement....
- Cela ne fonctionne pas, mais j'ai trouvé une solution, voir ma réponse post.
InformationsquelleAutor Developer IT

Vous devez vous connecter pour publier un commentaire.