Rusz swoim oknem

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.

8 thoughts on “Rusz swoim oknem

  1. 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 😉

  2. 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 😉

  3. 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.” :>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *