Elemente trasate în javascript - o compasie web de constructori de site-uri



O fereastră care poate fi trasă


Deplasați mouse-ul peste bara de titlu, faceți clic pe tasta din stânga
mouse-ul și, fără eliberare, trageți fereastra în altă locație.







Stabiliți că utilizatorul a dat clic pe butonul mouse-ului atunci când cursorul a fost deasupra titlului ferestrei, mânerul evenimentului onmousedown ne va ajuta. care este atribuit titlului ferestrei (mai exact, obiectul titlului ferestrei)


În conformitate cu standardele W3C DOM, procesatorii de evenimente sunt specificați de metoda addEventListener () (care este acceptată de browserele Firefox și Opera)


Dacă utilizați această metodă după declanșarea unui eveniment, funcția apelată va primi automat obiectul evenimentului ca singur argument. Adică atunci când scriptul rulează în browserele Firefox și Opera, funcția save_delta_koor (obj_evt) va primi un obiect de evenimente în variabila obj_evt, în timp ce nimic nu va funcționa în browser-ul Internet Explorer în variabila obj_evt. În Firefox și Opera, coordonatele cursorului mouse-ului se găsesc folosind proprietățile pageX și pageY ale obiectului eveniment primit


În Internet Explorer, coordonatele cursorului mouse-ului sunt determinate utilizând obiectul window.event și proprietățile clientX și clientY


După ce faceți clic pe butonul mouse-ului, funcția save_delta_koor () va fi pornit. Funcția save_delta_koor () calculează coordonatele mouse-ului și coordonatele ferestrei (bloc DIV cu id = "zagol_okno1") și apoi diferența de coordonate (delta_x și delta_y). Pentru a urmări mișcarea cursorului, vom folosi manipulatorul evenimentului onmousemove, pe care îl atribuim întregului document


Pentru browserele Firefox și Opera, am setat și dispozitivul de tratare a evenimentelor în conformitate cu standardele


În acest caz, funcția motor_okno () atunci când rulează script-ul în browserele Firefox și Opera va primi obiectul eveniment ca singur argument.
Mutarea indicatorului mouse-ului va apela funcția motor_okno (). care calculează noile coordonate ale indicatorului mouse-ului și apoi noile coordonate ale ferestrei și, în consecință, ne mută fereastra.






Puteți muta fereastra numai cu butonul mouse-ului apăsat, deci după eliberarea cheii, trebuie să opriți funcția motot_okno (). După cum vă amintiți, această funcție este apelată de manipulatorul evenimentului onmousemove al obiectului documentului. Pentru a prinde momentul în care utilizatorul a lansat butonul mouse-ului, manipulatorul evenimentului onmouseup va ajuta, care va fi atribuit întregului document


Acum, când utilizatorul eliberează butonul mouse-ului, se va apela funcția clear_delta_koor (). care "șterge" mânerul de evenimente pentru cursorul mouse-ului




ferestre