it-swarm.com.de

jQuery - Bilder auf iPad/iPhone ziehen - event.preventDefault () integrieren?

Ich benutze jQuery, jQuery UI und jQuery Mobile, um eine Webanwendung für iPhone/iPad zu erstellen. Jetzt erstelle ich Bilder und sie sollten ziehbar sein, also habe ich das gemacht:

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

Hier sehen Sie das Live-Beispiel: http://jsbin.com/igena4/

Das Problem ist, dass die ganze Seite scrollen will. Ich habe in Apples HTML5-Beispielen gesucht und festgestellt, dass das Scrollen der Seite verhindert wird, sodass das Bild ziehbar ist:

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

Aber das Problem ist für mich, wie kann ich das in meine jQuery aufnehmen? Woher bekomme ich event?

Freundliche Grüße.

15
Tim

Versuchen Sie diese Bibliothek

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

Führen Sie die folgenden einfachen Schritte aus, um Berührungsereignisse in Ihrer jQuery UI-App zu aktivieren:

  1. Fügen Sie jQuery und die jQuery-Benutzeroberfläche in Ihre Seite ein.

    <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. Fügen Sie Touch Punch nach der jQuery-Benutzeroberfläche und vor der ersten Verwendung ein.

    Beachten Sie, dass bei Verwendung der Komponenten der jQuery-Benutzeroberfläche Touch Punch nach jquery.ui.mouse.js enthalten sein muss, da Touch Punch Sein Verhalten ändert.

    <script src="jquery.ui.touch-punch.min.js"></script>
    
  3. Es gibt keine 3. Verwenden Sie einfach die jQuery-Benutzeroberfläche wie erwartet und sehen Sie, wie sie mit einem Fingerdruck funktioniert.

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

Ich habe eine Lösung gefunden, die auf Desktop-Browser und iOS Safari auf iPad und iPhone funktioniert: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

Sie müssen nur die JavaScript-Datei herunterladen und integrieren, das ist es.

5
Tim

jQuery 1.9 erledigt dies für Sie.

Hier ist ein Link zum RC: http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

3
thatmiddleway

Ich denke, es würde so aussehen

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

Ich bin mir nicht sicher, ob es document sein soll oder nur 'body'

EDIT

Ich weiß nicht, woher Sie dieses Codebeispiel genommen haben, aber es scheint immer zu verhindern, dass es zu einem Ziehen kommt. Versuchen Sie, wenn dies hilft - es sollte das Sprudeln verhindern. Wenn das Scrollen mit dem Dokumentknoten funktioniert, sollte das Ereignis nicht dorthin gelangen. [Ich kann es immer noch nicht an Äpfeln versuchen]

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

Du solltest einfach unter jquery's Doc http://jqueryui.com/demos/draggable/#events nachsehen.

Ihr Callback für das Startereignis sollte beim Aufrufen der Draggable-Methode ein Haken sein. Wie bei jeder anderen jQuery gibt es immer einen Parameter, an den Sie Objekte übergeben können, die die Rückrufe enthalten. Versuchen Sie, beim Start-Callback-Befehl die Funktion defineDefaut aufzurufen.

$( "#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