| Autor | Zpráva | ||
|---|---|---|---|
| sloncz Profil |
Zdravím, zjistil jsem, že pohyb myší po obrazovce je odlišný, než pohyb na mobilu.
Jde mi o to, že mám na stránce div, který se pohybuje podle toho, jak pohybuji kurzorem, ovšem na mobilu musím kliknout tam, kam chci aby se div posunul a to se mi jaksi nehodí. Zkoušel jsem do funkce přidat místo mousemove touchmove ale bez úspěchu. Nemáte někdo, kdo jste již něco podobného řešili, nějaké řešení? $(document).on('touchmove', function(e){
var left = (e.pageX > window.innerWidth - 100)? window.innerWidth - 100 : e.pageX;
$('.posun').css({
left: left
});
}); |
||
| Corwin Profil |
#2 · Zasláno: 23. 1. 2015, 09:49:58
ahoj, tady ty dotykove akce jsou bohužel čiré zlo... hotové řešení ti bohužel poskytnout nemohu, protože jsem to psal pro firmu... ale mohu tě popostrčit. jde o to, že musíš vždy použít všechny 3 události (start, move, end). jelikož občas se stane, že se jedna z nich prostě nezavolá... a do každé z nich si dáš výpočet pozice. hlavně je také potřeba to nastavovat na nějaký container toho divu, nikoli na dokument.
ale 100% funkční obecné řešení je práce na několik hodin, doporučuji pogooglit a něco hotového už najít. |
||
| sloncz Profil |
#3 · Zasláno: 23. 1. 2015, 10:56:50
Takže vytvořím 3 funkce s obsahem touchstart, touchmove, touchend a všechny tři budou mít stejnou funkci a to tu, že budou počítat souřadnice kurzoru a pak je nastavovat do css divu?
|
||
| Corwin Profil |
#4 · Zasláno: 23. 1. 2015, 11:06:23
no všechny tři nebudou mít úplně stejný obsah... asi takhle nějak :
touchstart - uložím pozici kurzoru touchmove - ukládám novou pozici kurzoru do nové proměnné + hýbu s divem - pokud neproběhl touchstart, na začátku uložím pro jistou i původní pozici kurzoru touchend - uložím novou pozici kurzoru - pokud neproběhl touchmove pořádně, pohnu s divem. |
||
| sloncz Profil |
Pokud jsem to správně pochopil, tak jsem to sepsal takto, ale nereaguje to vůbec.
$(document).on('touchstart', function(e){
var left = (e.pageX > window.innerWidth - 100)? window.innerWidth - 100 : e.pageX;
});
$(document).on('touchmove', function(e){
var left_x = (e.pageX > window.innerWidth - 100)? window.innerWidth - 100 : e.pageX;
$('.posun').css({
left: left_x
});
});
$(document).on('touchend', function(e){
var left_y = (e.pageX > window.innerWidth - 100)? window.innerWidth - 100 : e.pageX;
$('.posun').css({
left: left_y
});
}); |
||
| Corwin Profil |
#6 · Zasláno: 23. 1. 2015, 12:35:24
za 1. - dej si tam ty funkce i na mousedown / move / up, abys to mohl testovat na normálním počítači.
za 2. - dej si do toho console logy ať vidíš, kdy se která akce triggruje. za 3. - kde máš v nějakých globálních proměnných uloženo prvotní LEFT, abys k němu mohl přistupovat ve všech funkcích? za 4. - jak už jsem psal, nikoli dokument, ale div. var hasTouch = 'ontouchstart' in window;
$('.container').bind((hasTouch ? 'touchstart': 'mousedown'), function(){ });
$('.container').bind((hasTouch ? 'touchmove': 'mousemove'), function(){ }));
$('.container').bind((hasTouch ? 'touchend': 'mouseup'), function(){ })); |
||
| sloncz Profil |
Takže vlastně tvořím mousedown, mousemove a mouseup a pak to jen změním na touchmove?
a musím vytvořit div s class="container" o velikosti celé obrazovky? |
||
| Corwin Profil |
„a musím vytvořit div s class="container" o velikosti celé obrazovky?“
doporučoval bych to :-) „Takže vlastně tvořím mousedown, mousemove a mouseup a pak to jen změním na touchmove?“ nikoli. ta ukázka co jsem postnul vytvoří touchstart+move+end pro zařízení s dotykem. pro zařízení bez dotyku to vytvoří klasické mouse události. tedy prní je vždy začátek, druhý průběh a třetí konec. začni tím, že do těch prázdných funkcí dáš console logy s e.pageX. // edit : a nebo si ušetříš pár hodin práce a zkusíš pár minut googlit :-) http://threedubmedia.com/code/event/drag |
||
| sloncz Profil |
Corwin:
„začni tím, že do těch prázdných funkcí dáš console logy s e.pageX.“ O to právě jde, že když to udělám (i když tam dám aby vyskočil alert atd..) tak se to neprovede a do console to hodí chybu Uncaught SyntaxError: Unexpected token ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.container {
position: absolute;
left: 0;
top: 0;
width: 99.8%;
height: 50%;
border: 1px solid red;
}
.posun {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 25px;
background: black;
}
</style>
</head>
<body>
<div class="container">
<div class="posun"></div>
</div>
</body>
<script>
var hasTouch = 'ontouchstart' in window;
$('.container').bind((hasTouch ? 'touchstart': 'mousedown'), function(){ console.log(e.pageX); });
$('.container').bind((hasTouch ? 'touchmove': 'mousemove'), function(){ console.log(e.pageX); }));
$('.container').bind((hasTouch ? 'touchend': 'mouseup'), function(){ console.log(e.pageX); }));
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</html> |
||
| Corwin Profil |
#10 · Zasláno: 23. 1. 2015, 14:37:40
no jo, já tam zapomněl napsat parametr do funkce :-)
$('.container').bind((hasTouch ? 'touchstart': 'mousedown'), function(e){ console.log(e.pageX); }); |
||
| sloncz Profil |
#11 · Zasláno: 23. 1. 2015, 14:43:46
Přidal jsem tam "e" jak jste napsal, ale nic se nezměnilo.
Začíná to být čím dál více složitější :/ |
||
| Chamurappi Profil |
#12 · Zasláno: 23. 1. 2015, 15:26:11
Reaguji na sloncza:
„Začíná to být čím dál více složitější :/“ Ano, najít syntaktickou chybu, když ti prohlížeč řekne, že ti na konci určitého řádku přebývá závorka, je vskutku složité… Reaguji na Corwina: „no jo, já tam zapomněl napsat parametr do funkce :-)“ Což těžko může být příčina syntaktické chyby. „hlavně je také potřeba to nastavovat na nějaký container toho divu, nikoli na dokument.“ Proč? Stejně jako u událostí myši chytím začátek na věci, která jde přetahovat, a zbývající dvě události (pohyb a konec) chytám na window. V tom není žádná velká věda, ne?
„občas se stane, že se jedna z nich prostě nezavolá“ S tím jsem se ještě nesetkal. Tedy, je pravda, že se nemusí zavolat ontouchend, pokud ke konci dotýkání nedošlo uvnitř prohlížeče, proto je tam ještě ontouchcancel.
„ale 100% funkční obecné řešení je práce na několik hodin“ Jedinou komplikací je chytat i MSPointer-události. „ var hasTouch = 'ontouchstart' in window;“
Nedostatečná podmínka, selhává v Exploreru. Krom toho uživatel může mít dotykovou obrazovku a přesto používat i myš. A uvnitř e bude pokaždé trochu jiný objekt…
|
||
| sloncz Profil |
Tak nakonec jsem chybu odstranil, stačilo zdroj jquery souboru dát nad samotný <script>...</script>
|
||
| Corwin Profil |
#14 · Zasláno: 23. 1. 2015, 16:43:25
Chamurappi:
děkuji za doplnění některých mých mezer ve vzdělání. „Což těžko může být příčina syntaktické chyby.“ je to tak, odpovídal jsem ve spěchu a předpokládal automaticky chybu ve svém kódu a nikoli v kódu přispěvatele :-) „Nedostatečná podmínka, selhává v Exploreru.“ právě ve vlastním testování jsem problém neměl. 9-11 funguje, tedy akorát 8 nefunguje. tehdy ale píšu klientovi ať neočekává, že takovéto věci budou fungovat v zastaralém prohlížeči. (jak by tedy podmínka měla správně být)? zde to zajímá i mě. „Proč? Stejně jako u událostí myši chytím začátek na věci, která jde přetahovat, a zbývající dvě události (pohyb a konec) chytám na window. V tom není žádná velká věda, ne?“ jenom jsem předpokládal, že když chci hýbat s divem, chci s ním většinou hýbat pouze ve vymezené oblasti. proto chci nastavit události pouze na div vymezující danou oblast a zbytečně to nenabalovat na dokument. |
||
| sloncz Profil |
#15 · Zasláno: 23. 1. 2015, 17:16:42
Dost nového jsem se v tomto tématu ud Vás naučil, takže děkuji mnohokrát.
Ano, chyba proč to házelo chybu byla na mojí straně a v mém kódu, omlouvám se, ale nevěděl jsem to, co vím už teď :) Každopádně povedlo se mi fci touchstart touchmove touchend dát zdárně dohromady, takže si myslím, že můj problém je vyřešen. Ještě jednou děkuji. |
||
| Chamurappi Profil |
#16 · Zasláno: 24. 1. 2015, 01:42:05
Reaguji na Corwina:
„9-11 funguje, tedy akorát 8 nefunguje.“ Teď ti nějak nerozumím. Explorer umí chytat dotyky až od verze 10 (i když nepodporuje ontouchstart) a tvá podmínka to nerozpozná.
„tehdy ale píšu klientovi ať neočekává, že takovéto věci budou fungovat v zastaralém prohlížeči“ Jestli klientovi lžeš, že nejde udělat drag&drop v Exploreru 8, tak se nemáš moc čím chlubit. I kdyby skutečně byla detekce mylně pozitivní (což není, je mylně negativní v novějším), tak udělat výjimku pro starší Explorer by bylo triviální. „když chci hýbat s divem, chci s ním většinou hýbat pouze ve vymezené oblasti“ Ale nejspíš nechceš, aby se tvé pokyny přestaly zachytávat, kdykoliv přejedeš přes její okraj a ideálně ani v případě, když vyjedeš myší/prstem z oblasti prohlížeče. |
||
|
Časová prodleva: 10 let
|
|||
0