Jednoduchý Drag and Swap child elementů v JS – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Jednoduchý Drag and Swap child elementů v JS – JavaScript, AJAX, jQuery – Fórum – Programujte.comJednoduchý Drag and Swap child elementů v JS – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

FreshJS
~ Anonymní uživatel
1 příspěvek
30. 3. 2017   #1
-
0
-

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_OneElement_UpperLeftText
  • DND_OneElement_MiddleLeftText
  • DND_OneElement_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. :-)

Nahlásit jako SPAM
IP: 151.249.104.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 4 hosté

Podobná vlákna

Image swap — založil Me2D

Drag and Drop — založil skodik.o

Drag and drop — založil wetty

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý