| Autor | Zpráva | ||
|---|---|---|---|
| joe Profil |
#1 · Zasláno: 1. 7. 2011, 00:23:53 · Upravil/a: joe
Ahoj,
mám na stránce nějaké obrázky, které když chytnu, tak s nimi můžu hýbat (vytvoří se kopie a při puštění tlačítka na myši se zase tato kopie odstraní). Při hýbání je kopie obrázku pořád pod kurzorem. A já teď chci mít možnost tyto obrázky přesunout na nějaký blokový element. Na něm ale nefunguje onmouseover, protože kurzor je pořád nad obrázkem. Jak se to dá řešit? :-) Nějak nemůžu narazit na funkční řešení... Např.: na stránce bude cílový element (modrá barva), chytnu obrázek a přetáhnu ho na ten cílový element a on změní barvu na žlutou a pokud obrázek pustím na něm, dostanu nějakou událost. EDIT: dělám vlastně to samé co mají na deviantart.com (ale pouze pokud jste přihlášeni) Díky |
||
| Medvídek Profil |
#2 · Zasláno: 1. 7. 2011, 15:40:27
joe:
Zkus mrknout sem: http://jqueryui.com/demos/droppable/ |
||
| LOPAD Profil |
#3 · Zasláno: 1. 7. 2011, 15:55:10 · Upravil/a: LOPAD
ide to aj bez Jquery. Je to jednoduché. je to len overenie, či po pustení myšky(onMouseUp), je left lokácia obrázku presunutého myškou, väčšia alebo rovná sa z krajom obrázku kde má byť pustená a zároveň menšia alebo rovná sa s ľavou lokáciou obrázku kde má byť presunutý + šírka toho obrázku a zároveň či je top lokácia obrázku presunutého myškou, väčšia alebo rovná sa z krajom obrázku kde má byť pustená a zároveň menšia alebo rovná sa s top lokáciou obrázku kde má byť presunutý + výška toho obrázku. Trošku dlhá podmienka ale čo už.
|
||
| joe Profil |
#4 · Zasláno: 1. 7. 2011, 16:02:44
Medvídek:
Díky, že mě nenapadlo hned hledat u jQuery... ale musím to prozkoumat, nevyužívám žádný fw. LOPAD: Mně nejde o klasické drag & drop, ale o to, jak ho přichytit na nějaký element. Nejlepší asi bude porovnávat průnik cílového elementu s tím, co právě přesouvám (a nebo případně pozici myši s cílovým elementem) nebo máš jiný nápad? Ani tak mi nejde o kód, jako o nějakou myšlenku jak to udělat. Teď když jsem zkoušel to jQuery, tak jsem myslel, že to právě porovnává kurzor s tím cílovým elementem, ale neporovnává, nějak tu jejich logiku nechápu... |
||
| LOPAD Profil |
#5 · Zasláno: 1. 7. 2011, 16:11:49 · Upravil/a: LOPAD
Tak počkaj. ja som ti práve povedal ako v podstate funguje tamto tam. Máš tam aj demo, a to funguje tak ako moja myšlienka. A ak myslíš prichytiť po tom, čo sa okraj čo len dotkne toho divu alebo po nejakej nastavenje hodnote, to nieje problém. alebo tebe ide o efekt? Vysvetli mi to prichytenie prosím bližšie, pretože klasické pridanie akože pri presúvaní odskočí do cieľového divu nie je problémom.
|
||
| joe Profil |
#6 · Zasláno: 1. 7. 2011, 16:19:42
LOPAD:
Ano, tak nějak jsem to myslel, jen tu podmínku budu muset mít v onmousemove události přímo na dokumentu (chci nějak zvýraznit, když už to uživatel bude moci pustit...) Vlastně jsem hledal to co je tady http://jqueryui.com/demos/droppable/#visual-feedback Na to jejich porovnávání jsem ještě nekoukal, ale jakoby porovnávali střed toho s čím se hýbe s těma okrajema target.. ale zase není to přesný střed, no zdá se mi to nějaké divné :-) Udělám to asi tak, že to bude "aktivní" jakmile dojde k průniku... tzn. 1 pixelem se dotkne toho targetu. Snad to půjde nějak jednoduše. Díky Já jenom jestli nebude nějaké lepší řešení než porovnávat ty souřadnice, protože pak to možná bude takové trhané, i když v tch příkladech jQuery to funguje celkem dobře. |
||
| LOPAD Profil |
#7 · Zasláno: 1. 7. 2011, 16:25:47
nie, trhané to bude iba v pomalších prehliadačoch. Ale môžeš si každé jedno && ("and" čiže "a" v if) rozdeliť do samostatnej podmienky čo bude znamenať že sa bude robiť stupňovanie. Nebude sa overovať všetko, keď hneď prvá podmienka nesedí :D.
Ty si to len rozlož tak, aby to bolo čo najmenej náročné na prehliadač. A čo sa týka tej polovičky, tak np. Do budúceho príspevku napíšem kód. Ak chceš, tak si naň počkaj. |
||
| joe Profil |
#8 · Zasláno: 1. 7. 2011, 16:28:19
LOPAD:
Kód psát nemusíš ;-) To je přece jedno, jestli to bude v jedné podmínce nebo to bude zanořované, kontroluje se to zleva doprava, takže pokud jedna podmínka nebude splněná, pak se nic v tom těle podmínky neprovede... není třeba do sebe zanořovat 10x if |
||
| LOPAD Profil |
#9 · Zasláno: 1. 7. 2011, 16:40:48 · Upravil/a: LOPAD
...
|
||
| joe Profil |
#10 · Zasláno: 1. 7. 2011, 17:01:49
LOPAD:
„joe:“ „Kód psát nemusíš ;-)“ Kód dokonalý nebude, ne ve všech prohlížečích to bude fungovat stejně. Za chvíli si s tím jdu hrát. |
||
| Chamurappi Profil |
#11 · Zasláno: 1. 7. 2011, 17:02:46
Reaguji na LOPADa:
„A teraz chceš aby som to zmenil?“ Lepší bude to zahodit. Nepiš sem nevyzkoušené kódy, děláš v nich hloupé začátečnické chyby. Kroť se sám, než tě začne krotit někdo jiný. |
||
| joe Profil |
#12 · Zasláno: 1. 7. 2011, 17:10:58
Jinak si myslím, že v tom jQuery na to nejdou nejlepším způsobem - dávají události každému elementu, já dávám jen nadřazenému a prvek si vytáhnu přes targetElement. Věřím, že to je lepší způsob (?) :)
|
||
| pcmanik Profil |
#13 · Zasláno: 1. 7. 2011, 17:12:01
joe:
Ak ti to bude fungovat, a budes ochotny popisat toto zlepsenie, kludne im to napis do bugtrackeru. Myslim ze sa potesia :) |
||
| joe Profil |
#14 · Zasláno: 1. 7. 2011, 17:14:33
pcmanik:
Myslíš to co píšu ve [#12]? Přesouvání funguje, jdu ještě udělat "dropable". Anglicky moc neumím :) |
||
| pcmanik Profil |
#15 · Zasláno: 1. 7. 2011, 17:16:07
joe:
Ano presne to mam na mysli, este sa na to zajtra pozrem, a ak mas pravdu, tak im to tam postnem ja. |
||
| LOPAD Profil |
#16 · Zasláno: 1. 7. 2011, 19:04:15
No nefunguje, ale aj ja sa nan zajtra kuknem a nieco prerobim. drag uz mam.
|
||
| joe Profil |
#17 · Zasláno: 1. 7. 2011, 20:08:04
pcmanik:
Zjišťuji to takhle (jestli je to lepší způsob, to může napsat někdo zkušenější :) vzhledem k tomu, že do toho hlavního divu pořád přidávám child, nemusim po přidání znovu navěšovat eventy na nově přidané elementy) <div id="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> ... </div> Teď JavaScript
var parent = document.getElementById('parent');
parent.onmousedown = function(event) {
event = event || window.event;
console.log(event.target); // tady máme element, na který jsme klikli. Následuje ověření, jestli se jedná o element se třídou 'child'
// Pokud ano, tak následuje nastavení události onmousemove a onmouseup přímo na document
}
V tom onmousemove na document zjišťuji, jestli je kurzor nad cílovým elementem (nemám jen jeden, ale je jich víc) a díky funkci (díky http://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection ) function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}ověřím, jestli tam kurzor skutečně je nebo není. (Jediný problém mám akorát s CSS, chtěl jsem využít position: fixed; ale nedoporučuju to, je lepší to pozicovat absolutně a přesouvat si JavaScriptem, pro prohlížeč to je rychlejší) |
||
|
Časová prodleva: 13 let
|
|||
0