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:
var tempX = 0; var tempY = 0;
Aby większość z przeglądarek obsługiwała przesuwanie naszych okienek, dodajemy:
var IE = document.all ? true : false; if (!IE) document.captureEvents(Event.MOUSEMOVE);
Zbudujmy teraz funkcję odpowiedzialną za inicjalizację przesuwania naszego okna:
function initialize(myWindow) { selectedWindow = myWindow; document.onmousemove = move_object; }
oraz funkcję odpowiedzialną za wyłączenie zmiany pozycji naszego obiektu:
function finish() { document.onmousemove = ""; tempX = 0; tempY = 0; }
Kolejna funkcja będzie sercem naszej biblioteki i to ona odpowiedzialna będzie za przesuwanie odpowiednich elementów na naszej stronie:
function move_object(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft - 5; tempY = event.clientY + document.body.scrollTop - 5; } else { tempX = e.pageX tempY = e.pageY } selectedWindow.style.left=tempX; selectedWindow.style.top=tempY; }
Mając gotową bibliotekę JavaScript, stwórzmy odpowiedni plik HTML oraz dodajmy do niego nasz obiekt jaki zamierzamy przesuwać:
Title
I can move my window! I can move my window! I can move my window! I can move my window!
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:
.window { position:absolute; height: 200px; width: 200px; border: 1px solid #000; background-color: yellow; opacity: 0.6; -moz-user-select: none; } .window h1 { margin: 0; padding: 0; width: 100%; font-size: 10px; background-color: green; }
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.
jquery ma biblioteke od takich bajerow 😉
@D4rky: wiem 😀 ale chciałem zrobić to sam 🙂
Ależ ja rozumiem Gruszecko (sorry, ta grucha w logo mnie tak sympatycznie do gruszek nastawiła), tylko mówię 😉 A żeby ruszało jak mówisz, to trzeba chyba najpierw wyhaczyć w którym miejscu diva jest robiony mouseover, ale nie znam się na JS 😉
hehe, spoko też lubie te owoce 😀 co do tego ruszania, to trzeba od położenia kursora odjąć wartość początkową okna i uzyskaną wartość dodać dla tempX i tempY 🙂 przynajmniej tak narazie sobie wykombinowałem 😉
Mały bug, kiedy nacisnę na środek okna, ono przeskakuje mi narożnikiem w stronę kursora. Trochę to psuje efekt ;).
Albi – „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.” :>
Hym, fakt… Mimo wszystko można poprawić 😉
poprawie to, więc powinno być gotowe jutro wieczorkiem 🙂