Diskuze: Drag and drop
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 9 zpráv z 9.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
A jak jsi postupovala, co jsi vyzkousela, vygooglovala?
rgba(255, 255, 255, 0.8); // rgba(R, G, B, A); a = alpha = pruhlednost = opacity
Nevim, co je tohle za drag and drop, ale treba ve firefox mi to nefunguje. Ja bych sel znovu do google a pridal tam cross-browser.
Mi právě vůbec nejde změnit barva toho klonu, kdyžtak ji změním, ale průhlednost právě nikde nenastavuji. V odkaze je zdroják, opacity nikde nedávám. Koukala jsem na víc příkladů a pokaždé co je ten obdélník větší, tak udělá tohle.
Ahoj, máš nastavený alfa kanál na 0,8 v bílé barvě.
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
}Nebude to řešit tvůj problém? Jak už psal Peter Mlich, tak alfa kanál nastavuje průhlednost (opacity). Jestli to vidím dobře, tak červenou barvu překryješ 80% viditelnou bílou. To zvýraznění okolo kurzoru bude už nejspíš dělat JS automaticky.
Aha, tak to je divné. Zkoušela jsi použít pseudo-element :after? Spíš si ale myslím, že problém nebude v CSS, ale v JS, kde když vyjmeš element z běžného toku, tak se mu přiřadí nějaký defaultní styl nebo něco takového, ale s tím ti příliš neporadím, neboť JS téměř nepoužívám a tudíž neznám.
Respektive při čtverci se ten defaultní styl může chovat jinak a roztáhne se do celého elementu rovnoměrně. Jen u obdélníku či jiného tvaru o jiných délkách stran může vypadat takto.
Právě si taky myslím, že problém je v tom JS, že je to nějak defaultně nastavené, ale nevěděla jsem do jaké diskuze to hodit protože přece jenom je to i nastavení stylu že. Zkusím to dát ještě tam, jestli někdo nebude vědět. Právě že snad u všech příkladových řešení, je nějaký malý objekt většinou čtverec a po roztažení mi to dělá vše to samé. Ale díky.
Tak to je dobre si hrat pokus omyl. Funkcni verzi si zkopirovat, zalohovat (ja to delam ve faru F5, *.1 enter (2, 3, 4...)) a pak upravit. A dobre radeji zkopirovat jinam a davat bacha, at se neprepise original.
Ten js mnoho nedela. Na zacatku ulozi do pole to, co ma class=fill (v poctu
0) nebo empty (vsechno s tou class).
Prida listenery, presmeruje udalosti s elementu v poli empty na tve funkce.
e.ondragover=dragOver.
Presmeruje udalost ondragstart z celeho 'document' do tve funkce. Tam ale
pouzili jiny zapis. function(event)
dragstart - posun start
Ten timeout je jen kosmeticka zalezitost.
event.target.classList.add("hold"); - prida kazdemu elementu, na ktery se
klikne, class "hold"
setTimeout(() => (event.target.className = "invisible"), 0); - pri onload
se provede tento timeout, ktery prepise cele className na "invisible". Pokud tam
byla jina class, tak zmizi. Tady by bylo lepsi pouzit misto .className spis take
classList.add. ... Cili, po kliknuti probiha nejaky maly timeout a pak se teprve
vykona event.target.classList.add("hold").
ccc = event.target; ulozi si element, na ktery se kliklo do ccc.
draged
event.target.className="fill";
podobne, draged nastava, kdyz se s necim hybe. V te funkci by se meli necemu
menit souradnice top-left
dragOver - smaze veskere eventy (kliknuti mysi, zmacknuti klavesy)
dragEnter - to by mohla byt udalost, kdy hybes mysi nad necim, co se muze
hybat.
if(event.target.className != "fill") - kdyz je clasname==fill tak neco proved,
konkretne pridej class "hovered"
{
this.className += " hovered";
}
To je opet cele pochybne. Opet by tu melo byt classList.add. A misto podminky
neco jako classList.search (ale to nevim, jak se presne jmenuje).
dragLeave a dragDrop dela skoro totez.
this.append(ccc); - to prida dovnitr elementu to, co bylo v ccc.
Pokud te zajima vse, co se tyce class, tak se to jmenuje class + neco, classList, className, getElementByClassName.
Zobrazeno 9 zpráv z 9.