Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

Diskuze: Drag and drop

Aktivity (1)
Avatar
hankova31
Člen
Avatar
hankova31:23. dubna 9:00

Ahoj,
mám vytvořený grid systém a do něj chci vložit elementy div tak, že pokud budou bíle, půjdou do nich přetáhnout červené divy. Tedy s červenýma položkama půjde myší hýbat. Chtěla poradit jak změnit styl toho "klonu"? Pokud je to menší čtverec tak se ta barva jen trochu zesvětlí, což by mi nevadilo, ale pokud je to větší obdélník, je to pod kurzorem nejtmavší a od tohohle bodu jde ta barva do ztracena. Chci aby byla ta barva konstantní a nevím kde v kódu to změnit.
Odkaz příkladu: https://codepen.io/…1/pen/PgBBaj

Moc děkuji.

 
Odpovědět 23. dubna 9:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23. dubna 9:52

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.

 
Nahoru Odpovědět 23. dubna 9:52
Avatar
hankova31
Člen
Avatar
Odpovídá na Peter Mlich
hankova31:23. dubna 9:58

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.

 
Nahoru Odpovědět 23. dubna 9:58
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23. dubna 10:49

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.

Nahoru Odpovědět 23. dubna 10:49
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
hankova31
Člen
Avatar
hankova31:23. dubna 10:56

Jasně, i když dám ten alfa kanál pryč, tak to změní jen ty barvy, které jsou pevně dané, ale u toho posouvání je to pořád stejné. Hlavně se to děje až právě u jiné velikosti, kdyby to byly čtverce 100x100 tak to nedělá.

 
Nahoru Odpovědět 23. dubna 10:56
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23. dubna 11:02

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.

Nahoru Odpovědět 23. dubna 11:02
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23. dubna 11:05

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.

Nahoru Odpovědět 23. dubna 11:05
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
hankova31
Člen
Avatar
hankova31:23. dubna 11:06

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.

 
Nahoru Odpovědět 23. dubna 11:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23. dubna 13:15

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=dra­gOver.
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.clas­sList.add("hol­d"); - 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.clas­sList.add("hol­d").
ccc = event.target; ulozi si element, na ktery se kliklo do ccc.

draged
event.target.clas­sName="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, getElementByClas­sName.

 
Nahoru Odpovědět 23. dubna 13:15
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.