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
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
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
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
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
no jo, já tam zapomněl napsat parametr do funkce :-)

$('.container').bind((hasTouch ? 'touchstart': 'mousedown'), function(e){ console.log(e.pageX); });
sloncz
Profil
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
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
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
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
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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: