Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][jQuery] Drag'n'Drop
Forum PHP.pl > Forum > Przedszkole
Novy.
Siema, próbuje napisać ekwipunek na zasadzie drag'n'drop.

Wszystko jest ok, tylko kiedy złapie jakis item, i postawie go na zajętym polu, to można go tam upuścić.

Wiem, że w php da się sprawdzić czy pole jest zajęte, ale chciałbym to zablokować w samym jsie, bo jak już coś robić to dobrze, a nie na "odwal się".

Problem rozwiązany więc kod nie jest potrzebny - usuwam smile.gif
kamil4u
Nie zanalizowałem kodu.

Te pola to pewnie "div-y", lub lista*. Gdy jest już jakiś element w ekwipunku( na konkretnym miejscu ) to zmieniaj klasę tego div-a( li ), aby wiedzieć, że coś tam jest. I teraz w przypadku gdy puszczasz element na div-a, który ma daną klasę to nie pozawalasz na daną operację, jeżeli nie ma nadanej klasy to wrzucasz dany element w to miejsce.

Ew. jak nie trawiłem z odp. to opisz problem dokładnie, ale nie wstawiając kod, tylko słownie.

*Lista byłaby lepsza.
Novy.
Z dokumentacji jQuery ui, wyczytałem, że jest jakaś opcja w samym droppable. Tylko chyba nie potrafie jej dobrze użyc. (Kiedy puszczam na zajęty, to item wraca na poprzednie miejsce.)

Może zerknąłbyś jednak na ten kod ?smile.gif
kamil4u
No to tak jak pisałem:
Kod
    if($id_itemu > 0){
echo '
<div class="inventory" style="background:url(./img/inv/slot.png); width:41px; height:41px;float:left;">
<img src="./img/inv/'.$ikony[$id_itemu].'.png" id="'.$id_itemu.'" class="item"/>
</div>';
}
else{
echo '<div class="inventory" style="background:url(./img/inv/slot.png); width:41px; height:41px;float:left;"></div>';

Dodaj do tego jeszcze klasę - "zajęte", "wolne"

Teraz używasz tego w zależności od klasy: http://jqueryui.com/droppable/#revert
Jeszcze tylko poczytanie tego: http://api.jqueryui.com/droppable/#option-accept

I masz gotowy skrypt. Pytaj jak czegoś nie wiesz, ale najpierw popróbuj i poczyta API
Novy.
Szczerze? Ciężko mi to ogarnąc, bo przecież klasa już jest nadana, w dodatku funkcja itemInSpot, dodaje do class ui-dropped/dragged :/

Za mało ogarniam jquery widocznie, no nic. i tak dzięki za pomoc smile.gif
kamil4u
Cytat
Ciężko mi to ogarnąc, bo przecież klasa już jest nadana

Może być nadane wiele klas -> class="klasa1 klasa2 klasa3" -> czyli kolejne klasy oddzielone spacjami

Jak dobrze rozumiem, to ta funkcja powyżej( tą co zacytowałem ) "ładuje" przedmioty, czyli w if musisz dopisać klasę "zajęte", a w else "wolne".

Próbuj dalej i się nie poddawaj. W razie problemów wstaw kod na serwer lub tutaj: http://jsfiddle.net/

Tylko:
- to ma być demo - nie ładuj tam swojego całego kodu
- bez PHP - kod już wygenerowany, czyli taki jak w źródle strony
- kod ma być jak najprostszy, czyli tylko najważniejsze rzeczy - problem dotyczy JS - PHP tylko namiesza
- w inwentarzu tylko kilka pół - po co analizować kilkanaście na raz
- komentarze w najważniejszych miejscach
- najważniejsze, żebyś pokazał, że coś próbowałeś sam zrobić

Zawsze mi się łatwiej pomaga jak mogę samemu coś pozmieniać, zobaczyć jak to działa.
Pozdrawiam
Novy.
Okej, rozumiem Twój pomysł z tą klasą zajety/wolny.

Tylko mam kilka niejasności. Jeśli zdejmiemy z jakiegoś miejsca przedmiot i przeniesiemy go na wolne, to to stare miejsce bedzie dalej mialo klase zajete.

Wiec pytanie, jak zmienić klasę miejsca z którego zdjeliśmy item? Bo nadać klase zajety potrafie, ale zmienić zajęty na wolny już nie sad.gif
kamil4u
http://jqueryui.com/draggable/#events - zdarzenie start. I odwołujesz się do rodzica elementu drag&drop, czyli <div> i zmieniasz mu klasę.
Novy.
Udało się bez kombinowania z eventami biggrin.gif

Wystarczyło zedytować funkcje ItemInSpot, nie wiem czemu o tym wcześniej nie pomyślałem.

Przed zmiana miejsca sprawdzam czy dany spot jest zajety czy nie (szukam tagu img w divie). Jeśli znalazlo tag img to odsyłam dragowany element na poprzednie miejsce wink.gif

Cała filozofia, ale dzięki za wszystko. W pewnym momencie już miałem sobie odpuścić, ale postanowiłem popróbować i nie żałuje!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.