.Konfigurator typu przeciągnij i upuść

Budowa konfiguratora

Konfigurator w całości działa po stronie klienta. Z drobnymi dodatkami AJAX-owymi, ale to są naprawdę dane znaczące tylko w obrębie jednej sesji projektu. Projekt był dość długi, problem pojawiał się w momencie gdy zdjęcie obiektu (np. kulki), które miałem było wykonane lekko pod złym kątem. Wtedy dany obiekt nie pokrywał się z makietą, czyli np. sznurkiem. W całości perspektywa obu obiektów nie pasowała do siebie. Spróbujcie sami jak to działa.
Do zdjęć użytko profesjonalnego obiektywu do zdjęć makro, i sześcianu typu "whitebox", wyszło dobrze, żadnych cieni, ładne wydzielanie z tła.

Logika działania

Zasada działania jest relatywnie prosta. Mamy makietę, która ma swoje współrzędne i mamy obiekty, które też mają swoje współrzędne, i teraz chwytamy myszką daną zawieszkę/kuleczkę i przeciągamy nad makietę. W momencie zwolnienia przycisku myszy (czyli upuszczenia), program sprawdzi jakie nowe współrzędne ma zawieszka. Jeżeli nie zgadzają się one ze współrzędnymi sznurka/łańcuszka/bransoletki to program przyciągnie zawieszkę do najbliższych współrzędnych zdefiniowanych dla makiety. Tak aby zawieszka była na sznurku, a nie obok. Proste?
Dzięki tej zabawie poznałem prawdziwą moc JavaScriptu i jQuery

Live DEMO

Zapraszam do przetestowania. Proszę jednak pamiętać, że to wersja finalna BETA, i nie wszystko może prawidłowo działać.
Wersja demo: Demo

2017 - Internet.Media - Damian Krawiec, Zielona Góra, Lubuskie
m@internet.media.pl