NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

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
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
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.