• 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
104 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 (94,890 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 (94,890 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 (94,890 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 (3,020 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ź 40 wizyt
pytanie zadane 23 kwietnia w JavaScript, jQuery, AJAX przez gucisz Nowicjusz (160 p.)
0 głosów
1 odpowiedź 94 wizyt
0 głosów
1 odpowiedź 90 wizyt
pytanie zadane 19 listopada 2017 w JavaScript, jQuery, AJAX przez Kapi2222 Obywatel (1,220 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,791 zapytań

111,249 odpowiedzi

233,951 komentarzy

46,683 pasjonatów

Przeglądających: 186
Pasjonatów: 7 Gości: 179

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.

...