[PHP][jQuery] Drag'n'Drop Opcje

[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

Ten post edytował Novy. 1.12.2012, 14:29:05

[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 ?

[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

[kamil4u]

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

Ten post edytował kamil4u 1.12.2012, 00:10:37

[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

[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

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

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!