jQuery przeciągnij i upuść obrazy na iPadzie/iPhonie - jak zintegrować event.preventDefault ();?
Używam jQuery, jQuery UI i jQuery mobile do tworzenia aplikacji internetowej na iPhone'a/iPada.
Teraz tworzę obrazy i powinny być przeciągane, więc zrobiłem to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Drag - Test</title>
<link rel="stylesheet" href="[url=http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"/>]http://code.jquery.com/mobile/ ... gt%3B[/url]
<script src="[url=http://code.jquery.com/jquery-1.4.4.min.js"></script>]http://code.jquery.com/jquery- ... gt%3B[/url]
<script src="[url=http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>]http://code.jquery.com/mobile/ ... gt%3B[/url]
<script src="[url=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
</head>
<body>
<div>
<div style="width:500px;height:500px;border:1px solid red;">
<img src="[url=http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png"]http://upload.wikimedia.org/wi ... ot%3B[/url] class="draggable" alt="jQuery logo"/>
<img src="[url=http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png"]http://upload.wikimedia.org/wi ... ot%3B[/url] class="draggable" alt="Apple Inc. logo"/>
</body><script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
});
</script>
</html>
Tutaj możesz zobaczyć przykład na żywo:
http://jsbin.com/igena4
http://jsbin.com/igena4/
/
Problem w tym, że chcesz przewinąć całą stronę. Przeszukałem przykłady Apple HTML5 i znalazłem to, aby zapobiec przewijaniu strony, aby obraz można było przeciągać i upuszczać:
...
onDragStart: function(event) {
// stop page from panning on iPhone/iPad - we're moving a note, not the page
event.preventDefault();
...
}
Ale problem dla mnie polega na tym, jak mogę to uwzględnić w moim jQuery? Gdzie mogę uzyskać
event?
z szacunkiem.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
5 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
https://github.com/furf/jquery-ui-touch-punch
https://github.com/furf/jquery ... arczy wykonać te proste kroki, aby włączyć zdarzenia dotykowe w jQuery
Aplikacja UI:
<script>$('#widget').draggable();</script>Anonimowy użytkownik
Potwierdzenie od:
http://code.google.com/п/jquery-ui-for-ipad-and-iphone
http://code.google.com/p/jquer ... hone/
/
Wystarczy pobrać i zintegrować plik JavaScript, to wszystko.
Anonimowy użytkownik
Potwierdzenie od:
$(document).bind("dragstart", function(event, ui){event.preventDefault();
//return false;//edited
});
Nie jestem pewien, czy powinien to byćczy po prostu
EDIT
Nie wiem, skąd masz ten przykład kodu, ale wydaje się, że zawsze blokuje przeciąganie i upuszczanie. Wypróbuj, jeśli to pomaga - powinno zapobiegać bulgotaniu, więc jeśli przewijanie działa z węzłem dokumentu - zdarzenie nie powinno tam dotrzeć. [Nadal nie mogę tego posmakować na jabłkach]
$(document).ready(function() {$(".draggable").draggable();
$('body>div').bind("dragstart", function(event, ui){
event.stopPropagation();
});
});
Anonimowy użytkownik
Potwierdzenie od:
Oto link do RC:
http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc
http://blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/
/
Anonimowy użytkownik
Potwierdzenie od:
jquery Doc events http://jqueryui.com/demos/draggable/#
http://jqueryui.com/demos/draggable/#events
Wywołujesz wywołanie zwrotne dla zdarzenia startowego, gdy wywołujesz metodę draggable, tak jak w przypadku każdej innej jQuery, zawsze istnieje parametr, w którym można przekazać obiekty zawierające wywołania zwrotne. Spróbuj zadzwonić do prevedDefaut podczas wywołania zwrotnego.
$( "#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 ] );
}
});