HTML Drag n Drop - presun elementov z jednej časti do druhej

Programovacie jazyky, rady, poradňa...
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

HTML Drag n Drop - presun elementov z jednej časti do druhej

Príspevok od používateľa xadman »

Ahojte,

potrebujem spraviť nasledovnú vec. Mám stránku rozdelenú na 2 časti. Do hornej časti sa dynamicky pridávajú boxíky. Ked je ich viac ako je šírka stránky, tak sa tam zobrazí horizontálny scrollbar.
Užívateľ si vie potiahnuť boxík z hornej časti do dolnej, kde sa už poziciuje absolútne.
Riešil niekto už podobnú vec? Rád sa dozviem názory.

Pre názornú ukážku prikladám obrázok.
Prílohy
dnd_gta_monitor.png
dnd_gta_monitor.png (1.96 KiB) 1142 zobrazení
jorg22
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1087
Registrovaný: 12 aug 2006, 20:39
Kontaktovať používateľa:

Re: HTML Drag n Drop - presun elementov z jednej časti do dr

Príspevok od používateľa jorg22 »

Presne to co hladas ti poskytne jQuery UI:
https://jqueryui.com/droppable/#revert
Slayter
Addict
Addict
Používateľov profilový obrázok
Príspevky: 3111
Registrovaný: 28 jan 2006, 9:19
Bydlisko: Malmö, SWE

Re: HTML Drag n Drop - presun elementov z jednej časti do dr

Príspevok od používateľa Slayter »

a na co sa konkretne pytas?
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

Re: HTML Drag n Drop - presun elementov z jednej časti do dr

Príspevok od používateľa xadman »

@jorg22: Diky, vyzerá to fajn, pozriem sa na to.

@Slayter: Pýtam sa na to, ako sa rieši taká vec, keď chcem presúvať elementy z jedného containera do druhého. Taktiež ako pridávať nový element do horného containera tak, aby sa zobrazovali vedľa seba a pri prekročení šírky obrazovky sa tam vytvoril horizontálny scrollbar.
Slayter
Addict
Addict
Používateľov profilový obrázok
Príspevky: 3111
Registrovaný: 28 jan 2006, 9:19
Bydlisko: Malmö, SWE

Re: HTML Drag n Drop - presun elementov z jednej časti do dr

Príspevok od používateľa Slayter »

No zalezi na tom ako velmi custom riesenie chces, ked nieco out of the box tak jQuery UI je ok

vsak tomu hornemu elementu daj max sirku a daj mu overflow-x: auto

Popripade nieco modernejsie: https://medium.com/flexbox-and-grids/ho ... d860f539b2
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

Re: HTML Drag n Drop - presun elementov z jednej časti do dr

Príspevok od používateľa xadman »

Ďakujem za rady.
Spravil som to pomocou draggable+droppable. Jediný problém je ten, že keď chcem presunúť boxík do spodného containera nižšie, tak sa automaticky nenaťahuje.

@Slayter: tomu hornému containeru som ešte musel pridať white-space: nowrap;
Napísať odpoveď