[AJAX][JavaScript] Drop&Drag i wzajemne blokowanie się Opcje

[esiek]

Siemka mam problem. Chcę zrobić prostą grę w którą gram na telefonie czyli unblock me. gra wygląda mniej wiecej tak
http://www.kiragames.com/games/unblockme-free/
w wersji na iPhone. Sprawa jest prosta. pionowe klocki przesuwamy tylko w pionie, poziome tylko w poziomie, czerwony ma "wyjść" przez lukę z prawej strony.

Coś takiego chciałem zrobić stosując Divy oraz Drop&Drag w Ajax lub po prostu w JScript.

mam "zalążek tego co chcę osiągnąć. http://esiek.masternet.pl/test

Na początek wstawiłem dwa ponumerowane klocki. chcę przesunąć klocek nr 1 na maxa w prawo i mogę to zrobić bezproblemowo bo "przeleci" on nad klockiem nr 2. Moj cel w tym zadaniu to zmusić divy do tego aby się wzajemnie blokowały. dzięki temu klocek nr 1 będzie można przesunąć w prawo dopiero po przesunięciu klocka nr 2 w dół aby zrobić mu miejsce.
Kolejny obecny problem to taki, że gdy złapię najpierw nr1 to nr2 automatycznie zastępuje pozycję nr1 a nr 1 jest już nad nim więc "dupa" że tak powiem. Szczerze nie wiem jak sie za to zabrac.

Obecnie używam biblioteki mintAjax. Wiem że to błąd bo jest stara, ale ma pełną polską dokumentację, ale widze niestety ograniczone możliwości... Jakieś propozycję

Pozdrawiam, Grzesiek

nikt nie potrafi udzielic odpowiedzi?? nawet takiej że nie da rady? Eeeeee... bez przesady

[strife]

Nie wiem czy jQuery ma polską dokumentację, ale jeżeli nie będzie to dla Ciebie problemem to spróbuj użyć tego: http://jqueryui.com/demos/draggable/#default. Jest to jedna z najbardziej popularnych bibliotek do js. Ja dzięki niej robiłem różne cuda, myślę, że Ty też dasz sobie radę ;-)

Podpowiem, że może warto ugryźć temat http://jqueryui.com/demos/draggable/#constrain-movement - czyli blokowaniem jednego elementu w drugim.

nikt nie potrafi udzielic odpowiedzi?? nawet takiej że nie da rady? Eeeeee... bez przesady

To nie piekarnia, po kilku godzinach nikt Ci nie da odpowiedzi

[esiek]

dobra. zmienilem biblioteke na jQuery i zrobilem takie cos

http://esiek.masternet.pl/test/

problem w tym że da się to oszukać. drugi klocek od lewej przesuwając na maksa w dół da się tam go upuścić bo jest puste pole. wg mojego założenia powinien on się zatrzymać na pierwszej przeszkodzie i dalej nie "iść"

ale ogolnie jestem coraz bliżej bo gdy wybranym klockiem najadę na inny klocek to po upuszczeniu wraca do pierwotnej pozycji...

[strife]

dobra. zmienilem biblioteke na jQuery i zrobilem takie cos

http://esiek.masternet.pl/test/

problem w tym że da się to oszukać. drugi klocek od lewej przesuwając na maksa w dół da się tam go upuścić bo jest puste pole. wg mojego założenia powinien on się zatrzymać na pierwszej przeszkodzie i dalej nie "iść"

ale ogolnie jestem coraz bliżej bo gdy wybranym klockiem najadę na inny klocek to po upuszczeniu wraca do pierwotnej pozycji...

Spróbuj pobawić się zdarzeniami (events) jakie oferuje ta biblioteka: http://jqueryui.com/demos/droppable/#event-over

Pomyślałem, że można by zrobić coś na takiej zasadzie, że jeżeli jakiś element w czasie przesuwania znajduje się na innym elemencie to przerwij przeciąganie i cofnij element o n pixeli.

A druga koncepcja to taka (ale nie wiem czy da radę) aby w czasie przesuwania obszar w jakim można przesuwać się zmieniał, poniżej rysunek obrazujący o co mi chodzi:



I teraz tak:

Niebieskimi boxami możemy poruszać, zielone oznaczają obszar w jakim możemy je przemieszczać (to da się uzyskać w jquery), i teraz przy każdym zakończeniu przeciągania wszystkie obszary w jakich można przeciągać określone boksy się zmienia.

[esiek]

ten over nic nowego nie wnosi albo nie umiem tego zastosować. . . z nowu twoja opcja z zielonymi boxami jest dla mnie zrozumiałą, lecz nie wiem jak sie za to wziąć

[strife]

ten over nic nowego nie wnosi albo nie umiem tego zastosować. . . z nowu twoja opcja z zielonymi boxami jest dla mnie zrozumiałą, lecz nie wiem jak sie za to wziąć

No to po kolei, najpierw sprawdź czy można dynamicznie zmieniać obszar w jakim można przesuwać element, stwórz coś takiego:

[HTML] pobierz, plaintext 
<div id="parent" style="width: 500px; height: 300px; border: 1px solid black; padding: 1px">
    <div class="drag" style="width: 100px; height: 50px; border: 1px solid black;"></div>
</div>
<input type="button" id="changeWidth" />
[HTML] pobierz, plaintext 

Elementem .drag można przesuwać w obszarze elementu #parent, teraz stwórz sobie akcje on click na elemencie #changeWidth, w której zmienisz width dla elementu #parent na powiedzmy 300px.

Następnie spróbuj przeciągnąć element .drag do końca prawej krawędzi, jeżeli zatrzyma się przy krawędzi elementu #parent to znaczy, że moja koncepcja może się udać i będziemy myśleć dalej ;-)

[esiek]

juz chyba rozumiem o co ci chodzi. coś na styl diva bez stylizacji z rozmiarami 100% i zakres ruchu tego pola będzie się zmieniał zależnie od ułożenia innych pól

ale to nie przejdzie z krzyżującymi się polami manewrowymi... zobacz co teraz mam. . . . jak dodaje prowadzenie po siatce to nie wraca na miejsce. tylko gdzies sie gubi i nie wiem czemu a ta opcja byłaby przydatna. do tego blokowanie na divie by sie przydało. . . .

dostalem takie coś od chlopaczka z innego forum

http://simpleofqueries.pl/unblock.php


coś takiego chce osiągnąć ale na jQuery




UP!