jQuery - immagini trascinabili su iPad / iPhone - come integrare event.preventDefault () ;?

StackOverflow https://stackoverflow.com/questions/4488601

Domanda

Io uso jQuery, jQuery UI e jQuery Mobile per costruire un'applicazione web per iPhone / iPad. Ora creo immagini e dovrebbero essere trascinabili, così ho fatto questo: 

<!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>

Qui potete vedere l'esempio vivo: http://jsbin.com/igena4/

Il problema è che l'intera pagina vuole scorrere. Ho cercato negli esempi HTML5 di Apple e ho trovato questo per impedire lo scorrimento della pagina, in modo che l'immagine è trascinabile: 

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

Ma il problema è per me, come posso includere questo nel mio jQuery? Dove posso trovare event?

Con i migliori saluti.

È stato utile?

Soluzione

Prova questa libreria

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

Basta seguire questi semplici passi per attivare gli eventi di tocco in jQuery UI app:

  1. Includere jQuery e jQuery UI sulla tua pagina. 

    <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. Includere tocco pugno dopo jQuery UI e prima del primo utilizzo.

    Si noti che se si utilizza i componenti di jQuery UI, touch Punch deve essere incluso dopo jquery.ui.mouse.js, come tocco Punch modifica il suo comportamento. 

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

  3. Non v'è alcun 3. Basta usare jQuery UI come previsto e guardarlo lavorare con il semplice tocco di un dito. 

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

Altri suggerimenti

Ho trovato una soluzione che sta lavorando sul browser desktop e iOS Safari su iPad e iPhone: http://code.google.com/p/jquery- ui-for-ipad-e-iphone /

È sufficiente scaricare e integrare il file JavaScript, questo è tutto.

Credo che sarebbe simile a questa 

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

Non sono sicuro se dovrebbe essere document o semplicemente 'body'

Modifica

Non so dove hai preso quel campione codice, ma sembra bloccare sempre qualsiasi trascinamento. Provare se questo aiuta - si dovrebbe impedire zampillante, quindi se lo scorrimento opere con il nodo del documento - l'evento non dovrebbe arrivare. [Non riesco ancora a provare su mele] 

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

jQuery 1.9 farà questo per voi.

Ecco un link al RC: http: / /blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

Si deve semplicemente andare a vedere di jQuery Doc http://jqueryui.com/demos/draggable/# eventi

È di callback per l'evento di avvio dovrebbe essere gancio quando si chiama il metodo trascinabili, come con ogni altro jQuery, c'è sempre un param dove è possibile passare un oggetto che contiene i callback. Prova a chiamare preventDefaut nel callback di avvio. 

$( "#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 ] );
        }
    });
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top