• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przenoszenie kart między divami z wykorzystaniem JavaScript

VPS Starter Arubacloud
0 głosów
183 wizyt
pytanie zadane 28 sierpnia 2018 w JavaScript przez fmc Początkujący (260 p.)

Dzień dobry!

Próbuję zrobić małą grę, gdzie przekłada się karty na planszy. Zredukowany kod wrzuciłem tutaj: https://jsfiddle.net/fmc13/bads762j/

Każdy pusty div ma swój id: p11, p12 itd. Natomiast divy z kartami są oznaczone z4 i z5. Zależy mi na uzyskaniu następującego efektu:

1. Klikam div o id=z4 a następnie div o id=p11. Wtedy docelowy div zmienia swój id na z4 a div na którym znajdowała się karta z4 zmienia id na p31.

2. Klikam znowu div, który aktualnie jest z4 i przenoszę go na p12, który zmienia oznaczenie na z4. Div z którego "wziąłem" z4 wraca do id=p11.

3. Klikam znowu div z4 i przenoszę go na p11 a "stary" div wraca do id=p12.

Itd.

Problem ma z addEventListenerByID, gdyż nie mogę dynamicznie przypisać go do pola które "zniknęło" czyli np. p11 a następnie pojawiło się znowu.

Próbowałem skorzystać z rozwiązania z wykorzystaniem querySelector i target (jak poniżej) ale nie udało mi się uzyskać pożądanego efektu.

var itemTeam = document.querySelector(".pozycja-lawka");
var itemT = document.querySelectorAll(".lawka");

itemTeam.addEventListener("click", function(ev){
	
	firstCard(ev.target);
	
}, false);

Będę wdzięczny za pomoc.

Pozdrawiam

Filip.

komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)
edycja 28 sierpnia 2018 przez pablop76
Ciekawe ćwiczenie. Pochylę się nad tym w wolnym czasie. Na początek nadał bym wszystkim kartom wspólny atrybut i pobrał wszystkie do tablicy, następnie przeleciał po tablicy i nasłuchiwał kliknięcia.  Nie analizowałem Twojej logiki więc nie wypowiem się na temat tego co już masz w dalszej części.
komentarz 28 sierpnia 2018 przez fmc Początkujący (260 p.)
Dzięki za odpowiedź ale nie bardzo rozumiem Twojej propozycja rozwiązania. Problemem, przynajmniej w moim odczuciu, jest to, że nie mogę dynamicznie przypisywać addEventListener np w pętli.

Wydawało mi się, że problem nie jest specjalnie trudny do rozwiązania. Szukałem, czy ktoś stworzył np. grę w warcaby w js, bo tam chyba podobny problem logiczny był do rozwiązania (pionki przeskakujące po polach), ale nie znalazłem kodu.
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)
Pobierasz elementy po id, a jak byś pobrał wszystkie na raz np. po klasie, albo atrybucie data to mógłbyś zrobić pętle po tej tablicy i nałuchiwać kliknięcia z którego pobrałbyś i ustawił co Ci potrzeba na klikniętym elemencie.
komentarz 29 sierpnia 2018 przez fmc Początkujący (260 p.)
Dzięki za podpowiedź. Sprawdziłem, ale niestety to nie to. Rozbijam się o ten sam problem to jest w momencie, gdy przenoszę kartę z jednego pola na drugie to to pierwsze nie ma podpiętego addEventListener. Gdyby to udało się rozwiązać to reszta jest chyba :-) prosta.
komentarz 29 sierpnia 2018 przez pablop76 VIP (123,060 p.)

Taki efekt można osiągnąć właśnie za pomocą tej metody, którą Ci zaproponowałem a jeszcze lepiej za pomocą event delegation  Obie metody są w linku.

komentarz 29 sierpnia 2018 przez fmc Początkujący (260 p.)
Dzięki za pomoc. Czytałem i próbowałem zastosować w praktyce. Niestety natrafiam na ten sam problem. Pole po zwolnieniu nie ma "nasłuchiwania".  Chyba brakuje mi wiedzy jak to dobrze wykorzystać. Będę jeszcze nad tym siedział.

1 odpowiedź

+1 głos
odpowiedź 29 sierpnia 2018 przez elwood Gaduła (4,180 p.)
Jeżeli Twoim zadaniem jest tylko zamiana miejsca obrazka, to nie potrzebujesz żadnych id.

Przykładowy kod:

https://jsfiddle.net/bads762j/69/
komentarz 29 sierpnia 2018 przez fmc Początkujący (260 p.)
Dzięki. Mniej więcej o coś takiego mi chodzi. Jednak potrzebuję przenosić cały div (obrazek jest tylko jednym z elementów karty). Poza tym potrzebuję też id (a przynajmniej tak mi się wydaje na chwilę obecną). W oparciu o id chcę później obliczać wyniki.

W każdym razie dzięki za kawał roboty. Przeanalizuję kod i może uda mi się dostosować go do swoich potrzeb. :-)

Podobne pytania

0 głosów
1 odpowiedź 460 wizyt
0 głosów
1 odpowiedź 131 wizyt
pytanie zadane 23 kwietnia 2019 w JavaScript przez gucisz Nowicjusz (160 p.)
0 głosów
1 odpowiedź 368 wizyt
pytanie zadane 13 listopada 2018 w JavaScript przez FroGiS Użytkownik (810 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...