Autor Zpráva
rudla
Profil
Ahoj,
pořeboval bych zjistit, jak získat pozici kurzoru a aby byl označený prvek zobrazen přímo u něj. (i když myší hýbu, prvek by měl držet u kurzoru).

Jde to? Dík.

Edit: vím, že to asi patří do JS, kdyžtak to tam hoďte, pokud to tam fakt patří. Nevím to jistě.
Witiko
Profil
var prvek = document.getElementById("prvek");

document.body.onmousemove = function(e) {
  prvek.style.left =  ((e || event).clientX + document.body.scrollLeft - Xoffsety) + "px";
  prvek.style.top =  ((e || event).clientY + document.body.scrollTop - Yoffsety) + "px";
}

<div id="prvek" style="position:absolute;">Prvek</div>
_es
Profil
Witiko:
Použil si zlý operátor, má byť ||.
Funguje to správne vo všetkých prehliadačoch?
joe
Profil
Witiko:
1. Máš prohozené X a Y
2. Máš místo || napsáno |
3. Nefunguje to správně.

... to je ten váš nativní JavaScript bez frameworků ;-)

EDIT: abych byl přesnější - není tam započtený offset viewportu. Navíc v IE to nefunguje vůbec.
rudla
Profil
joe:
Dobrá, jak to tedy má být správně?
_es
Profil
Witiko:
Ešte ti tam chýbajú jednotky dĺžky - aby to fungovalo aj v štandardnom vykresľovacom režime. V IE to tuším nefunguje.

joe:
… to je ten váš nativní JavaScript bez frameworků ;-)
No tak sa teda pochváľ so svojím jednoduchým riešením v jQuery.
joe
Profil
_es:
Pro jQuery třeba takto:

$(document).ready(function() {
	$(this).mousemove(function(e) {
		$("#prvek").css({
			left: e.pageX + 20,
			top: e.pageY + 20
		});
	});
});
_es
Profil
rudla:
jak to tedy má být správně?
var prvek = document.getElementById("prvek");

document.documentElement.onmousemove = function(e) {
  prvek.style.top =  (e || event).clientY + "px";
  prvek.style.left =  (e || event).clientX + "px";
};
No neviem, či je opravený Witikov kód to, čo chceš.
Nechcel si náhodou nejakú funkčnosť drag & drop?

joe:
left: e.pageX + 20,
V jQuery netreba zadávať jednotky dĺžky?
Overil si si, že ti to naozaj funguje v rôznych prehliadačoch?
joe
Profil
_es:
Asi ne :-) funguje to i s nimi, takže tam zřejmě dochází k nějaké kontrole.
Nejsem žádný expert na používání jQuery, jen jsem tím chtěl naznačit, že použití fw smysl má, protože ne vždycky je to triviální, jak se na první pohled může zdát.

Pořád tam je problém v tom, že to nejde v IE a pokud stránka bude mít vertikální posuvník, nebude se to zobrazovat na správné pozici (stačí otestovat přidáním hodně značek <br> do dokumentu).

EDIT: jasně, ověřil. Funguje to třeba i v IE6.
EDIT2: (ta 20ka je tam proto, aby to nebylo tak nalepené u kurzoru)
rudla
Profil
_es:
Nechcel si náhodou nejakú funkčnosť drag & drop?
Nechtel, chtel jsem objekt u kurzoru
Witiko
Profil
_es:
Ano, sypu si popel na hlavu, psal jsem to narychlo, bez přídavné kontroly. Opraveno.

joe:
Pořád tam je problém v tom, že to nejde v IE a pokud stránka bude mít vertikální posuvník, nebude se to zobrazovat na správné pozici
To se samozřejmě dá snadno ošetřit pomocí vlastností, které nám sdělují, kolik již bylo odscrollováno. Posuvníky nás nezajímají, poněvadž pozici nastavujeme od shora a zleva, povětšinou tam žádné posuvníky nenajdeš. Mým záměrem v žádném případě nebylo zaslat plnohodnotné řešení (což ani není možné, jelikož rudla se se svými záměry ohledně scriptu nesvěřil), spíš popostrčit.

že použití fw smysl má
Na tohle není potřeba žádné fw, kterými jsi viditelně zcela nepokrytě posedlý. Stačí sada funkcí / objekt řešící daný problém - takový si dokáže napsat / sehnat každý, kdo není zcela líný.
Chamurappi
Profil
Reaguji na rudlu:
var prvek = document.getElementById("prvek");
document.onmousemove = function(e)
{
  var event = e || window.event, html = document.documentElement, body = document.body;
  prvek.style.left = (event.pageX || event.clientX + html.scrollLeft + body.scrollLeft - html.clientLeft - body.clientLeft) + "px";
  prvek.style.top = (event.pageY || event.clientY + html.scrollTop + body.scrollTop - html.clientTop - body.clientTop) + "px";
};


Reaguji na joe:
Není to moc pohodlné, ale pořád o desítky kB menší. Koukám, že tohle je ten (skoro jediný) výjimečný případ, jak jsme se nedávno bavili :-)
_es
Profil
joe:
Pořád tam je problém v tom, že to nejde v IE
Mne môj kód v IE funguje.
Skús si porovnať zaťaženie procesora v rôznych prehliadačoch tvojho a Chamurappiho kódu pri hýbaní myšou.
joe
Profil
Witiko:
Mým záměrem v žádném případě nebylo zaslat plnohodnotné řešení
To mi přijde, jako neposlat žádné řešení. Co s řešením, které nefunguje? U hodnoty top má být Y. Neříkám, že se to nedá udělat, samozřejmě, že to jde, ale neznalý člověk může trávit dlouhou dobu tím, aby našel skutečně funkční řešení. A jak už jsem napsal, toto nefunguje ani v Internet Exploreru.
joe
Profil
Chamurappi:
Chválím :-) Menší to rozhodně je a je rozhodně lepší použít tvé řešení. Kdybych to měl psát, taky bych k něčemu podobnému došel, ale musel bych to testovat a hledat, kde všude a v jakém prohlížeči je ta a jinde zase ona proměnná/parametr

Jinak přesně takovový příklad jsem měl předtím na mysli.

_es:
Mne môj kód v IE funguje.
Nevím proč, v IETesteru mi to nedělalo vůbec nic. Ten od Chamurappiho jde (samozřejmě :-))
Testovat to nemá smysl, je jasné co je lepší. Nehádám se, jen jsem tím chtěl poukázat na efektivnost (co se v rychlosti psaní skriptů týká) frameworků.
Witiko
Profil
joe:
Nehádám se, jen jsem tím chtěl poukázat na efektivnost (co se v rychlosti psaní skriptů týká) frameworků.
To už poukazuješ nějaký ten pátek. Já bych rád poukázal na to, že frameworky nejsou jediným způsobem, jak si usnadnit práci. ;)

Kód v postu #2 jsem rozšířil, avšak ponechal ve schématické podobě.
rudla
Profil
_es:
Ještě jsem se nezmínil, že mi o IE dnes výjmečně nejde.
Witiko
Profil
rudla:
U tohoto scriptu je požadovaná úroveň abstraktizace stejně poměrně malá, takže je to stejně celkem jedno. :)
rudla
Profil
Chamurappi:
Já tedy zkusím to tvoje :)
rudla
Profil
Stejně nic. Prvek je na místě, kde byl uložen. Ještě zkusím jednu metodu, ale nic si neslibuji.
rudla
Profil
Takže ne. Nejede mi to. Hodil jsem to jako script do hlavičky. Do body jsem nastavil obrazek s id prvek a nic... obrazek je umisteny na strance. Co delam spatne?
Davex
Profil
rudla:
Co delam spatne?
O chybové konzoli jsi už slyšel?

Skript dej za ten obrázek.
rudla
Profil
Davex:
O chybové konzoli jsi už slyšel?
Letmo.

Skript dej za ten obrázek.
Dobře.
rudla
Profil
Davex:
Skript dej za ten obrázek.
Pořád nic.
Chamurappi
Profil
Reaguji na rudlu:
Má element, který chceš pozicovat, position: absolute, jak je uvedeno v příspěvku [#2]?
Jestli je chyba v něčem jiném, bez živé ukázky se nehneme.
rudla
Profil
Chamurappi:
Dobrá, zkusím position: absolute, pokud ani to, hodím to na web a dám odkaz.
rudla
Profil
Už to jede, bylo to opravdu position: absolute;.

Mám ještě dotaz. Dá se prvek napozicotat kousek od kurzoru? Aby mi tam nelez a byl vedle něj?


Ještě ten odkaz:
http://zatnaktel.unas.cz/ntb/osobni-data/html-testy/mys.html


Ale opravdu děkuju.
rudla
Profil
Už to jede. Vyřešil jsem to. Za všechno vám děkuju.

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:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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

0