Jak zrobić jQuery UI 'draggable()' div draggable dla ekranu dotykowego?
Mam jQuery UI draggable(), który działa w Firefoksie i Chrome. Koncepcja interfejsu użytkownika polega zasadniczo na kliknięciu, aby utworzyć element typu "post-it".
Zasadniczo klikam lub stukam na div#everything (100% wysoki i szeroki), który nasłuchuje kliknięć i wyświetla się pole tekstowe. Dodajesz tekst, a po zakończeniu zapisuje go. Możesz przeciągnąć ten element. To działa na normalnych przeglądarkach, ale na iPadzie mogę przetestować z nie mogę przeciągać elementów wokół. Jeśli dotknę, aby wybrać (potem lekko przyciemnia), nie mogę go potem przeciągnąć. Nie przeciągnie się w lewo ani w prawo. Ja mogę przeciągać w górę lub w dół, ale nie przeciągam pojedynczych div, przeciągam 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, aby "zapisać" notatkę i zamienić wejściowy div na wyświetlacz 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();
}
});
A ja mam ten kod kiedy Ładuję stronę do zapisanych notatek:
$('.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 STATE obiekt obsługuje zapisywanie notatki.
Onload, to jest całe ciało 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>
Moje pytanie brzmi: Jak mogę to poprawić na iPadzie?
Nie jestem ustawiony na jQuery UI, zastanawiam się, czy jest to coś, co robię źle z jQuery UI, lub jQuery, czy mogą być lepsze frameworki do robienia wieloplatformowych / wstecznie kompatybilnych elementów drag (), które będą działać dla interfejsu dotykowego.
Bardziej ogólne uwagi na temat tego, jak pisać takie komponenty UI, to Witam.
Dzięki!
Aktualizacja:
Udało mi się po prostu podłączyć to do mojego połączenia jQuery UI draggable() i uzyskać poprawną przeciągalność na iPadzie!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
JQuery Touch plugin udało się!
7 answers
Po marnowaniu wielu godzin, natknąłem się na to!
Tłumaczy zdarzenia dotknięcia jako zdarzenia kliknięcia. Pamiętaj, aby załadować skrypt po jquery.
Mam to działa na iPadzie i iPhonie
$('#movable').draggable({containment: "parent"});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-07 10:34:27
Uwaga: Ta odpowiedź została napisana w 2010 roku i technologia porusza się szybko. Po nowsze rozwiązanie zobacz odpowiedź @Ctrl-alt-dileep poniżej.
W zależności od potrzeb, możesz spróbować jQuery Touch plugin ; Możesz spróbować przykład tutaj. Działa dobrze, aby przeciągnąć na moim iPhonie, podczas gdy jQuery UI Draggable nie.
Alternatywnie możesz wypróbować tę wtyczkę , chociaż może to wymagać od Ciebie napisania własnego przeciągnięcia funkcja.
Jako wskazówka dodatkowa: Wierzcie lub nie, słyszymy coraz większy szum o tym, jak urządzenia dotykowe, takie jak iPad i iPhone, powodują problemy zarówno w przypadku stron internetowych korzystających z funkcji hover/onmouseover, jak i przeciąganych treści.
Jeśli jesteś zainteresowany podstawowym rozwiązaniem tego problemu, jest to użycie trzech nowych zdarzeń JavaScript; ontouchstart, ontouchmove i ontouchend. Apple rzeczywiście napisał artykuł o ich użyciu, które można znaleźć tutaj . Uproszczony przykład można znaleźć tutaj . Zdarzenia te są używane w obu wtyczkach, z którymi się połączyłem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-15 07:07:38
Ten projekt powinien być pomocny-mapuje zdarzenia dotykowe, aby klikać zdarzenia w sposób, który pozwala jQuery UI działać na iPadzie i iPhonie bez żadnych zmian. Wystarczy dodać JS do dowolnego istniejącego projektu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-02 03:45:06
JQuery ui 1.9 zajmie się tym za Ciebie. Oto demo pre:
Https://dl.dropbox.com/u/3872624/lab/touch/index.html
Po prostu weź jquery.mysz.ui.js out, włóż go pod plik jQuery ui, który ładujesz, i to wszystko, co musisz zrobić! Działa również w sortable.
Ten kod działa świetnie dla mnie, ale jeśli twoje błędy, zaktualizowana wersja jquery.mysz.ui.js można znaleźć tutaj:
JQuery-UI sortable nie działa na urządzeniach dotykowych z systemem Android lub IOS
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:32:29
Ten projekt na GitHubie może być twoim rozwiązaniem
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-09 02:03:58
Borykałem się wczoraj z podobnym problemem. Miałem już" działające "rozwiązanie wykorzystujące jQuery UI' s draggable wraz z jQuery Touch Punch, o których mowa w innych odpowiedziach. Jednak używanie tej metody powodowało dziwne błędy w niektórych urządzeniach z Androidem, dlatego postanowiłem napisać małą wtyczkę jQuery, która może przeciągać elementy HTML za pomocą zdarzeń dotykowych zamiast za pomocą metody emulującej fałszywe zdarzenia myszy.
Wynikiem tego jest jQuery Draggable Touch który jest prostą wtyczką jQuery do tworzenia elementów draggable, która ma urządzenia dotykowe jako główny cel za pomocą zdarzeń dotykowych (takich jak touchstart, touchmove, touchend, itp.). Nadal ma funkcję awaryjną, która wykorzystuje zdarzenia myszy, jeśli przeglądarka / urządzenie nie obsługuje zdarzeń dotykowych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-06 16:55:55
Możesz spróbować użyć jquery.pep.js :
Jquery.pep.js to lekka wtyczka jQuery, która zamienia dowolny DOM element do przeciąganego obiektu. Działa głównie we wszystkich przeglądarkach, od starego do nowego, od dotyku do kliknięcia. Zbudowałem go, aby zaspokoić potrzebę w które jQuery UI nie spełniało się, ponieważ nie działało na urządzeniach dotykowych (bez hackerów).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-14 13:42:24