• 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

0 głosów
100 wizyt
pytanie zadane 28 sierpnia 2018 w JavaScript, jQuery, AJAX 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 Szeryf (89,270 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 Szeryf (89,270 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 Szeryf (89,270 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 Bywalec (2,960 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ź 32 wizyt
pytanie zadane 1 dzień temu w JavaScript, jQuery, AJAX przez gucisz Nowicjusz (160 p.)
0 głosów
1 odpowiedź 85 wizyt
0 głosów
1 odpowiedź 89 wizyt
pytanie zadane 19 listopada 2017 w JavaScript, jQuery, AJAX przez Kapi2222 Obywatel (1,220 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

62,438 zapytań

108,589 odpowiedzi

226,699 komentarzy

35,996 pasjonatów

Przeglądających: 58
Pasjonatów: 5 Gości: 53

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...