Mam interfejs użytkownika jQuery, draggable()który działa w przeglądarkach Firefox i Chrome. Koncepcja interfejsu użytkownika polega w zasadzie na kliknięciu, aby utworzyć element typu „post-it”.
Zasadniczo klikam lub stukam div#everything(100% wysoki i szeroki), który nasłuchuje kliknięć i wyświetla się wejściowy obszar tekstowy. Dodajesz tekst, a kiedy skończysz, zapisuje go. Możesz przeciągać ten element dookoła. To działa w normalnych przeglądarkach, ale na iPadzie, z którym mogę przetestować, nie mogę przeciągać elementów. Jeśli dotknę, aby zaznaczyć (następnie lekko się ściemni), nie mogę go przeciągnąć. W ogóle nie przeciągnie się w lewo ani w prawo. I można przeciągnąć w górę lub w dół, ale nie jestem przeciągając osobnika div, jestem przeciągając całą stronę.
Oto kod, którego używam do przechwytywania kliknięć:
$('#everything').bind('click', function(e){
var elem = document.createElement('DIV');
STATE.top = e.pageY;
STATE.left = e.pageX;
var e = $(elem).css({
top: STATE.top,
left: STATE.left
}).html('<textarea></textarea>')
.addClass('instance')
.bind('click', function(event){
return false;
});
$(this).append(e);
});A oto kod, którego używam do „zapisania” notatki i przekształcenia wejściowego div w zwykły display div:
$('textarea').live('mouseleave', function(){
var val = jQuery.trim($(this).val());
STATE.content = val;
if (val == '') {
$(this).parent().remove();
} else {
var div = $(this).parent();
div.text(val).css({
height: '30px'
});
STATE.height = 30;
if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) {
while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) {
var h = div.height() + 10;
STATE.height = h;
div.css({
height: (h) + 'px'
}); // element just got scrollbars
}
}
STATE.guid = uniqueID()
div.addClass('savedNote').attr('id', STATE.guid).draggable({
stop: function() {
var offset = $(this).offset();
STATE.guid = $(this).attr('id');
STATE.top = offset.top;
STATE.left = offset.left;
STATE.content = $(this).text();
STATE.height = $(this).height();
STATE.save();
}
});
STATE.save();
$(this).remove();
}
});Mam ten kod, kiedy ładuję stronę z zapisanymi notatkami:
$('.savedNote').draggable({
stop: function() {
STATE.guid = $(this).attr('id');
var offset = $(this).offset();
STATE.top = offset.top;
STATE.left = offset.left;
STATE.content = $(this).text();
STATE.height = $(this).height();
STATE.save();
}
});Mój STATEobiekt obsługuje zapisywanie notatek.
Onload, to jest cała treść HTML:
<body>
<div id="everything"></div>
<div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div>
<div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div>
<div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div>
<div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div>
<div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div>
</body>Tak więc moje pytanie brzmi naprawdę: jak mogę to poprawić na iPadzie?
Nie jestem ustawiony na interfejs użytkownika jQuery, zastanawiam się, czy to jest coś, co robię źle z interfejsem jQuery lub jQuery, lub czy mogą istnieć lepsze ramy do wykonywania elementów draggable () kompatybilnych z wieloma platformami / wstecznie pracować dla interfejsów użytkownika z ekranem dotykowym.
Bardziej ogólne komentarze na temat pisania komponentów interfejsu użytkownika, takich jak ten, również byłyby mile widziane.
Dzięki!
AKTUALIZACJA:
udało mi się po prostu draggable()powiązać to z moim wywołaniem interfejsu użytkownika jQuery i uzyskać odpowiednią możliwość przeciągania na iPadzie!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});Plugin jQuery dotykowy załatwiło sprawę!
Odpowiedzi:
Po zmarnowaniu wielu godzin natknąłem się na to!
jquery-ui-touch-punch
Tłumaczy zdarzenia dotknięcia jako zdarzenia kliknięcia. Pamiętaj, aby załadować skrypt po jquery.
Mam to działające na iPadzie i iPhonie
źródło
Uwaga: ta odpowiedź została napisana w 2010 roku, a technologia szybko się rozwija. Aby uzyskać nowsze rozwiązanie, zobacz odpowiedź @ ctrl-alt-dileep poniżej .
W zależności od potrzeb możesz wypróbować wtyczkę jQuery touch ; można spróbować przykład tutaj . Przeciąganie na moim iPhonie działa dobrze, podczas gdy jQuery UI Draggable nie.
Alternatywnie możesz wypróbować tę wtyczkę, chociaż może to wymagać napisania własnej funkcji , którą można przeciągać.
Na marginesie: wierzcie lub nie, słyszymy coraz większe zainteresowanie na temat tego, jak urządzenia dotykowe, takie jak iPad i iPhone, powodują problemy zarówno w witrynach internetowych, które używają funkcji: najedź / onmouseover, jak i treści, które można przeciągać.
Jeśli interesuje Cię podstawowe rozwiązanie tego problemu, to użycie trzech nowych zdarzeń JavaScript; ontouchstart, ontouchmove i ontouchend. Apple faktycznie napisał artykuł o ich zastosowaniu, który można znaleźć tutaj . Uproszczony przykład można znaleźć tutaj . Te zdarzenia są używane w obu wtyczkach, z którymi się łączyłem.
źródło
.touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });z moim istniejącymdraggable()połączeniem i działa to wspaniale! Nadal muszę opracować wszystkie zdarzenia, którymi chcę się zająć, aby uzyskać prawidłowy przepływ pracy, ale wtyczka jQuery touch załatwiła sprawę!Ten projekt powinien być pomocny - mapuje zdarzenia dotykowe na zdarzenia kliknięć w sposób, który umożliwia działanie interfejsu jQuery na iPadzie i iPhonie bez żadnych zmian. Po prostu dodaj JS do dowolnego istniejącego projektu.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
źródło
jQuery ui 1.9 zajmie się tym za Ciebie. Oto demo pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
Po prostu wyjmij plik jquery.mouse.ui.js, umieść go pod ładowanym plikiem jQuery ui i to wszystko, co powinieneś zrobić! Działa również w przypadku sortowania.
Ten kod działa świetnie, ale jeśli otrzymujesz błędy, zaktualizowaną wersję jquery.mouse.ui.js można znaleźć tutaj:
Sortowanie Jquery-ui nie działa na urządzeniach dotykowych opartych na systemie Android lub IOS
źródło
Ten projekt na githubie może być Twoim rozwiązaniem
https://github.com/furf/jquery-ui-touch-punch
źródło
Zmagałem się wczoraj z podobnym problemem. Miałem już "działające" rozwiązanie wykorzystujące draggable jQuery UI razem z jQuery Touch Punch, o których wspominałem w innych odpowiedziach. Jednak użycie tej metody powodowało dla mnie dziwne błędy w niektórych urządzeniach z Androidem, dlatego zdecydowałem się napisać małą wtyczkę jQuery, która może przeciągać elementy HTML za pomocą zdarzeń dotykowych, zamiast używać metody emulującej fałszywe zdarzenia myszy.
Wynikiem tego jest jQuery Draggable Touch, która jest prostą wtyczką jQuery do przeciągania elementów, której głównym celem są urządzenia dotykowe za pomocą zdarzeń dotykowych (takich jak touchstart, touchmove, touchend itp.). Nadal ma rezerwę, która używa zdarzeń myszy, jeśli przeglądarka / urządzenie nie obsługuje zdarzeń dotykowych.
źródło
Możesz spróbować użyć jquery.pep.js :
Strona internetowa , link do GitHub
źródło