| Autor | Zpráva | ||
|---|---|---|---|
| RastyAmateur Profil |
Dobrý den,
dnes jsem se chtěl něco přiučit v javascriptu, tak jsem si chtěl vytvořit script, na který už existuje knihovna, konkrétně Draggable jQuery. Aby to nebyly jen prázdné divy, vytvořil jsem (ještě ne úplně celý) poznámkový blok. Jde o to, že si vytvoříte poznámky a pak si s nima hýbete jak chcete + ještě pár dalších funkcí. Ze začátku jsem si zkoušel jen dokázat pohybovat s divem. Zkoušel jsem to na JSFiddle, a šlo to dokonale. Vše fungovalo tak, jak mělo. Když si to vyzkoušíte, to přetahování je krásně plynulé. Poté jsem začal přidělávat funkce, design a pár dalších blbinek. Ovšem je to neskutečně zasekané (viz. živá ukázka). Dokázal by mi někdo říci, proč je to tak pomalé a proč to přetahování divu není stále tak krásně plynulé? Původně jsem si myslel, že za to můžou php soubory provádějící se přes ajax (jde tam jen o zápis do cookies), ovšem ty se provádějí až po konečném přesunutí (on.("mouseup")). Již mě nic jiného nenapadá... Děkuji PS: Pokud si bude někdo zkoušet vytvořit poznámku, script na vyčištění cookies je zde |
||
| Chamurappi Profil |
#2 · Zasláno: 14. 1. 2016, 20:27:24
Reaguji na RastyAmateura:
1) Máš tam transition: 350ms na :hover, takže pokud je myš najetá nad prvkem, kterým táhneš, každá skriptem vyvolaná změna left a top se animuje plynule 350 milisekund.
2) Prohlížeč má chuť označovat text (a třeba i přetahovat ho standardním drag&dropem) a ta se trochu bije s tvým stěhovacím skriptem, což může také způsobovat záseky. V odkázaném JSFiddle není v přetahovaném bloku tolik obsahu. 3) V JSFiddle se prohlížeč stará o čtvrtinu obrazovky, u tebe o celou. V tomto případě to asi nehraje významnou roli, ale větší plocha bývá náchylnější k pomalejším animacím. |
||
| RastyAmateur Profil |
#3 · Zasláno: 14. 1. 2016, 22:06:54
Chamurappi:
1) Děkuji mocmocmoc!!! To by mě vůůbec nenapadlo. Ani jsem se toho při těch změnách nevšiml. Původně jsem to tam neměl, ale pak jsem chtěl zvýraznit, že při najetí na div se s ním dá pravděpodobně něco dělat. Tak jsem mu dal červený rámeček, a z mého pohledu ke každému :hover efektu patří pomalejší přechod. Je to mnohem hezčí (ve většině případů). Pak jsem barvu rámečku odstranil, ale transition jsem nechal. Ještě jednou děkuji! 2) Všiml jsem si, ale nějak jsem doufal, že se to dá "vypnout", nebo nějak oklamat. Bylo mi jasné, že pokud to vůbec půjde, nebude to hezké ani lehké. Tento problém jsem ale prozatím neřešil. Ale všiml jsem si.. 3) Beru na vědomí |
||
| Dan Charousek Profil |
#4 · Zasláno: 15. 1. 2016, 11:27:19
RastyAmateur:
„2) Všiml jsem si, ale nějak jsem doufal, že se to dá "vypnout", nebo nějak oklamat.“ .css .noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}.html <div class="noselect">Neoznačitelný text</div> zdroj |
||
| RastyAmateur Profil |
#5 · Zasláno: 15. 1. 2016, 12:55:45
Dan Charousek:
Dokonalé. děkuji! |
||
| Chamurappi Profil |
Reaguji na RastyAmateura:
„z mého pohledu ke každému :hover efektu patří pomalejší přechod“ Pokud jsi na to tak moc zvyklý, proč jsi měl transition jen při :hover stavu? To pak funguje jen jednosměrně, ne?
Připomínám, že do vlastnosti transition jde také dát i název vlastnosti, která se má plynule měnit, takže můžeš rámeček měnit animovaně a souřadnice skokově.
„ale nějak jsem doufal, že se to dá "vypnout", nebo nějak oklamat“ Dá se skriptem zrušit označení v okamžiku stisknutí tlačítka myši. To mi přijde většinou jako lepší řešení, než učinit celý text neoznačitelný. Ale nevím, jaké s tím máš dál záměry… |
||
| RastyAmateur Profil |
#7 · Zasláno: 15. 1. 2016, 13:38:47
Chamurappi:
„Připomínám, že do vlastnosti transition jde také dát i název vlastnosti, která se má plynule měnit, takže můžeš rámeček měnit animovaně a souřadnice skokově.“
Jsem si toho vědom. Ovšem nyní to řešit nebudu, to už jsou jen detaily. Ale děkuji za radu. „Dá se skriptem zrušit označení v okamžiku stisknutí tlačítka myši. To mi přijde většinou jako lepší řešení, než učinit celý text neoznačitelný. Ale nevím, jaké s tím máš dál záměry…“ Mám v plánu to udělat tím způsobem, že jakmile se začne text přetahovat, dám mu třídu .noselect a při zvednutí myši mu ji opět odeberu. To je řešení, které mě napadlo jako první. Jen se bojím, že to bude hůře řešitelné a bude to ten script opět zpomalovat. Budu tam muset dát nějakou podmínku.
|
||
|
Časová prodleva: 8 let
|
|||
0