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.