The Essence of Programming

Wielu z was pewnie nie raz potrzebowało możliwości przesuwania określonych obiektów na stworzonych przez siebie stronach. Jako, że staram się do rozwiązań niektórych problemów dojść sam, stworzyłem prostą bibliotekę, która nam to umożliwi :)

Pierwszą rzeczą jaką się zajmiemy będzie utworzenie pliku libWindow.js

Zadeklarujmy dwie zmienne, odpowiedzialne będą one za przechowywanie aktualnej pozycji kursora naszej myszki:

Aby większość z przeglądarek obsługiwała przesuwanie naszych okienek, dodajemy:

Zbudujmy teraz funkcję odpowiedzialną za inicjalizację przesuwania naszego okna:

oraz funkcję odpowiedzialną za wyłączenie zmiany pozycji naszego obiektu:

Kolejna funkcja będzie sercem naszej biblioteki i to ona odpowiedzialna będzie za przesuwanie odpowiednich elementów na naszej stronie:

Mając gotową bibliotekę JavaScript, stwórzmy odpowiedni plik HTML oraz dodajmy do niego nasz obiekt jaki zamierzamy przesuwać:

Zdarzenie onMouseDown odpowiedzialne jest za obsługę akcji przyciśnięcia przycisku myszy na naszym obiekcie, zaś zdarzenie onMouseUp za jego zwolnienie.

Do naszej strony dodajmy jeszcze odpowiedni plik z arkuszami stylów - window.css:

Ufff. Skończyliśmy :) Tym samym możemy przetestować działanie naszej nowo stworzonej biblioteki - przykłady.

Pokazany przykład nie jest doskonały, ponieważ po kliknięciu w dowolnym miejscu określonego obiektu jego lewy górny róg przesuwa się do aktualnej pozycji naszej myszki, ale bądź co bądź zamierzony efekt osiągnęliśmy.