Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij akce až 80 % zdarma při nákupu kreditů. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Jednoduchý Drag and Swap child elementů v JS

Aktivity
Avatar
JSGreen
Člen
Avatar
JSGreen:3.4.2017 13:40

Ahojte,

V Javascriptu jsem začátečník a potřeboval bych vyřešit „na rychlo“ jedno zadání. Pro zkušené to nebude nic složitého. :-)

Momentálně jsem si vytvořil toto zadání: https://jsfiddle.net/vafu80hk/

V každém sloupci je 5 boxů. Každý box obsahuje 6 divů s textem.

Každý box je draggable. Když uživatel chytí jeden box (div DND_OneElement) a přesune ho na druhý, je třeba prohodit obsah (text) pouze těchto divů:

DND_OneElemen­t_UpperLeftText
DND_OneElemen­t_MiddleLeftText
DND_OneElemen­t_DownLeftText
Příklad:

Na startu: http://i.imgur.com/bUS6eMR.png

Uživatel chytí myší box, kde je „Element 002“ a natáhne ho na box „Element 008“: http://i.imgur.com/xNC1fCu.png

Výsledek po dropu bude vypadat takto: http://i.imgur.com/p7zbf5x.png

Dokáže mi někdo dopsat JS? Děkuji všem za pomoc předem. :-)

 
Odpovědět
3.4.2017 13:40
Avatar
Robert Poč
Člen
Avatar
Robert Poč:7.4.2017 8:42

Řešíš vyřešené, např. http://dsmorse.github.io/gridster.js/

Editováno 7.4.2017 8:43
 
Nahoru Odpovědět
7.4.2017 8:42
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Robert Poč
Neaktivní uživatel:7.4.2017 9:01

Spomínaná knižnica mi asi nepríde najvhodnejšia, lebo keď som sa začal hrať s demom na stránke, tak som to za pár sekúnd rozbil :D
Za seba sem pridám moju overenú: http://draggabilly.desandro.com/

Nahoru Odpovědět
7.4.2017 9:01
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:7.4.2017 9:07

K tomu rozbitiu: Možno je to naschvál, že sa dajú elementy rozhadzovať hocikde, ale keďže tam ide o grid, podľa mňa je to neželané a malo by si to držať nejaký tvar - eliminovať prázdne miesto.
K draggabilly sa na grid používa toto: http://packery.metafizzy.co/

Nahoru Odpovědět
7.4.2017 9:07
Neaktivní uživatelský účet
Avatar
Robert Poč
Člen
Avatar
Odpovídá na Neaktivní uživatel
Robert Poč:7.4.2017 9:16

Nemyslím si, že nesvázanost a otevřenost prostředí je chyba. Obecně jsem odkazoval na hotová řešení, nevymýšlej vymyšlené, že podobných frameworku jsou tuny a každému vyhovuje jiný, je věc osobních preferencí.

 
Nahoru Odpovědět
7.4.2017 9:16
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 5 zpráv z 5.