Fogd és vidd, drag, drop, move animáció.
Kiválasztott 8 elem mozgatása,
drag, drop, move tartalmával együtt.
A fogd és vidd, drag, drop, move animációs elemek helyzetének legegyszerűbb meghatározását a top=0 és left=0 értékek meghatározásával tehetjük meg.
Ekkor az egér aktuális pozíciójához is, könnyen meghatározhatjuk pozíciójukat úgy, hogy az egér mindig, azaz, mozgatás közben is, a mozgatandó terület felett legyen.
Amikor a fogd és vidd, drag, drop, move animációs elemek, dokumentum, azaz, tartalmirész szövegfolyamának valamelyik részén, egy kijelölt területen helyezkednek el, és az egér aktuális pozíciójához igazodjanak, komoly számításokat kell végezni.
Szerencsére a JavaScript, sokat tud segíteni animációs elemek helyzetének meghatározásában, értékük kiszámolásában.
A fogd és vidd, drag, drop, move animációhoz, az egérbillentyű lenyomását és felengedését alkalmazzuk.
mousedown() - Egérbillentyű lenyomása. Bekövetkezik, ha a kiválasztott elemen, egérbillentyűt lenyomják.
mouseup() - Egérbillentyű felengedése. Bekövetkezik, ha a kiválasztott elemen, egérbillentyűt felengedték.
A left és top értékek meghatározását JavaScript-re kell bíznunk, két okból is.
1. Nem tudhatjuk felhasználó milyen széles monitort használ.
2. A fogd és vidd animációs elemek előtt, mekkora magasságot foglalnak el, dokumentum tartalmi részei.
Nekünk egy értéket kell meghatározni JavaScript programunkban, és csak akkor, ha:
A tartalom (container) div elem, rendelkezik, margin-top: értékkel.
Vagy, a body elem rendelkezik padding-top: értékkel.
|
Az "egér" poziciója, böngészőablak területén: 0 |
JavaScript meghatározás szerint, "top" helyzete azon kijelölt területnek, melyben a fogd és vidd, animációs elemek vannak.
px A "TopDiv" elem magassági értéke.(Ezt, baloldalon piros vonal szemlélteti.) + 15px Ha van, container div elem margin-top érték, vagy body elem padding-top: érték. px Az animációs fogd és vidd terület, top értéke.
A "top" értéket leellenőrizhetjük, ha az "egeret" fogd és vidd kezdő elemekhez mozgatjuk, majd fentebb
az "egér" poziciója böngészőablak területén értéket, összehasonlítjuk az animációs fogd és vidd terület, top értékével.
Firefox és Explorer 11: Pontos értéket kapunk.
Chrome és Microsoft Edge: Körülbelül 15 px eltérést mutat, de ez, nem befolyásolja objektumok mozgatását. Csak az egérkurzor pozíciója változik kiválasztott objektum területén.
Böngészők közötti eltérést korrigálhatjuk, ha a JavaScript programunkban elhelyezünk böngészőt felismerő meghatározást.
Ekkor a JavaScript automatikusan módosítja felhasználó által használt böngészőnek megfelelően, a top értéket.
Alaphelyzetre állításhoz,
böngészőablakból frissíteni kell az oldalt,
vagy üssük le az "F5" billentyűt.
Teszteléshez:
Nyomjuk le egér balos vagy jobbos billentyűjét valamelyik alakzaton, mozgassuk tetszőleges pozícióba, és engedjük fel a billentyűt.
Majd a leírtaknak megfelelően, mozgassuk a többi alakzatot is.
Rendezzük fenti alakzatokat, a következő formátumba.
Próbáld meg!
Ha sikerült a rendezés, bármelyik objektumot egérkurzorhoz tapaszthatjuk, és mindig követi egérkurzort.
Megszabadulni akkor tudunk, ha frissítjük az oldalt. Hogyan tapaszthatjuk oda, ezt másik JavaScript témakörben, már leírtam.
Mozgatható objektumok mérete tartalommal együtt, tetszőleges nagyságú lehet, melyek méretét és kezdő pozícióját a CSS, azaz, stilus.css fájlban kell meghatározni.
Felhasználható:
- Tartalmirészek, hivatkozások, fotók áthelyezésére.
- Táblázatok cellatartalmának áthelyezésére.
- Szórakoztató animáció készítésére.
- stb.
Fenti animáció, program leírásai.
HTML fájl tartalma.
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Elem mozgatás</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script language="JavaScript" type="text/javascript" src="animacio.js"></script> <link href="animacio.css" rel="stylesheet" type="text/css" /> </head> <body id="bodi"> <div id="container"> <div id="TopDiv"> <!-- Az animációs terület, top értékét meghatározó div. --> Ide írhatjuk dokumentumunk kezdeti tartalmát. Elhelyezhetünk további div elemeket, képeket és táblázatokat is. <h2>Alaphelyzetre állításhoz, frissíteni kell az oldalt.</h2> </div> <!-- Top értéket meghatározó, "TopDiv" lezárása. --> <div id="kijeloltterulet"> <!-- Ezen div elem területén helyezzük el, mozgatható alakzatokat. --> <div class="malakzat" id="malakzat"> </div> <div class="malakzat2" id="malakzat2"> </div> <div class="malakzat3" id="malakzat3"> </div> <div class="malakzat4" id="malakzat4"> </div> <div class="malakzat5" id="malakzat5"> </div> <div class="malakzat6" id="malakzat6"> </div> <div class="malakzat7" id="malakzat7"> </div> <div class="malakzat8" id="malakzat8"> </div> </div> <!-- A "kijeloltterulet" záró div eleme. --> Ide írhatjuk dokumentumunk további tartalmát. Elhelyezhetünk további div elemeket, képeket és táblázatokat is. </div> <!-- A tartalom, azaz, "container" záró div eleme. --> </body> </html>
Az animacio.css fájl tartalma.
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; margin-top:15px; margin-right: auto; margin-left: auto;}
#TopDiv{margin:0.01px; padding:0.01px; border-left:2px solid red; padding-left:2px}
#kijeloltterulet{width: 100%; height: 350px; margin:0.01px; padding:0.01px; background-color: white;}
/* Mozgatható alakzatok. --------------------------------------------- */
/* 1. Első sorban lévő elemek. */
.malakzat,.malakzat2,.malakzat3,.malakzat4{margin-top:0px;}
.malakzat{position:absolute; margin-left: 0px; width: 50px; height: 50px; background-color: maroon;}
.malakzat2{position:absolute; margin-left: 50px; width: 50px; height: 50px; background-color: olive;}
.malakzat3{position:absolute; margin-left: 100px; width: 100px; height: 50px; background-color: orange;}
.malakzat4{position:absolute; margin-left: 200px; width: 100px; height: 50px; background-color: purple;}
/* 2. Második sorban lévő elemek. */
.malakzat5,.malakzat6,.malakzat7,.malakzat8{ margin-top: 50px;}
.malakzat5{position:absolute; margin-left: 0px; width: 100px; height: 50px; background-color: blue;}
.malakzat6{position:absolute; margin-left: 100px; width: 100px; height: 50px; background-color: red;}
.malakzat7{position:absolute; margin-left: 200px; width: 50px; height: 50px; background-color: darkkhaki;}
.malakzat8{position:absolute; margin-left: 250px; width: 50px; height: 50px; background-color: coral;}
JavaScript, animacio.js fájl tartalma.
$(document).ready(function(){
var ism = 100; // Reakció, azaz, ismétlődés gyakoriságának beállítása.
// -- 1. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak1;
$("#malakzat").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak1= setInterval("Nyomva(1)", ism);
});
// -- 2. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak2;
$("#malakzat2").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak2= setInterval("Nyomva(2)", ism);
});
// -- 3. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak3;
$("#malakzat3").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak3= setInterval("Nyomva(3)", ism);
});
// -- 4. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak4;
$("#malakzat4").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak4= setInterval("Nyomva(4)", ism);
});
// -- 5. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak5;
$("#malakzat5").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak5= setInterval("Nyomva(5)", ism);
});
// -- 6. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak6;
$("#malakzat6").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak6= setInterval("Nyomva(6)", ism);
});
// -- 7. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak7;
$("#malakzat7").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak7= setInterval("Nyomva(7)", ism);
});
// -- 8. Alakzat. Billentyűt lenyomták a területén. ------
let Mlak8;
$("#malakzat8").mousedown(function(){
document.onmousedown = tilt; document.onmouseup = tilt; document.onclick = tilt;
document.ondblclick = tilt; document.oncontextmenu = tilt;
Mlak8= setInterval("Nyomva(8)", ism);
});
// --- Billentyűt felengedték. Dokumentum body területén.-----------------------------------
// Feloldjuk egérre vonatkozó eseményeket.
// Hatástalanítjuk alakzatoknál setInterval()-t, és töröljük interval értéket, a változókból.
$("#bodi").mouseup(function(){
document.onmousedown = old; document.onmouseup = old; document.onclick = old;
document.ondblclick = old;
clearInterval(Mlak1); Mlak1 = null;
clearInterval(Mlak2); Mlak2 = null;
clearInterval(Mlak3); Mlak3 = null;
clearInterval(Mlak4); Mlak4 = null;
clearInterval(Mlak5); Mlak5 = null;
clearInterval(Mlak6); Mlak6 = null;
clearInterval(Mlak7); Mlak7 = null;
clearInterval(Mlak8); Mlak8 = null;
});
});
// ----------------------------------------------------------------------------------------------------------------------------------
function tilt(e) { if (!e) e = window.event; return false; }
function old(e) { if (!e) e = window.event; return true; }
// ----------------------------------------------------------------------------------------------
function Nyomva(a){
$(document).mousemove(function(event){ eTp = event.pageY; eLp = event.pageX; });
// Ha van meghatározva, tartalom (container) elemnek, margin-top: érték, akkor írjuk be.
var marginT=15; // Ha nincs meghatározva, margin-top: érték, akkor marginT=0;
// Start pozícióhoz, mozgatható elemek (alakzatok), szélesség és magasság beazonosítása. -------
// 1. sorban lévő elemek ( alakzatok).
L = $("#malakzat").outerWidth() /3; T = $("#malakzat").innerHeight() /2;
L2 = $("#malakzat2").outerWidth() /3; T2 = $("#malakzat2").innerHeight() /2;
L3 = $("#malakzat3").outerWidth() /3; T3 = $("#malakzat3").innerHeight() /2;
L4 = $("#malakzat4").outerWidth() /3; T4 = $("#malakzat4").innerHeight() /2;
// 2. sorban lévő elemek ( alakzatok).
L5 = $("#malakzat5").outerWidth() /3; T5 = $("#malakzat5").innerHeight() /2;
L6 = $("#malakzat6").outerWidth() /3; T6 = $("#malakzat6").innerHeight() /2;
L7 = $("#malakzat7").outerWidth() /3; T7 = $("#malakzat7").innerHeight() /2;
L8 = $("#malakzat8").outerWidth() /3; T8 = $("#malakzat8").innerHeight() /2;
// Left és Top módosított értékének meghatározása. -----------------
// 1. sorban lévő elemek ( alakzatok).
if(a==1){ var Lmod=eLp-L; var Tmod=eTp-T; }
if(a==2){ var Lmod=eLp-L2; var Tmod=eTp-T2; }
if(a==3){ var Lmod=eLp-L3; var Tmod=eTp-T3; }
if(a==4){ var Lmod=eLp-L4; var Tmod=eTp-T4; }
// 2. sorban lévő elemek ( alakzatok).
if(a==5){ var Lmod=eLp-L5; var Tmod=eTp-T5; }
if(a==6){ var Lmod=eLp-L6; var Tmod=eTp-T6; }
if(a==7){ var Lmod=eLp-L7; var Tmod=eTp-T7; }
if(a==8){ var Lmod=eLp-L8; var Tmod=eTp-T8; }
// A left érték meghatározás. -----------------------------------------------------------------------
var MW= screen.availWidth; // Monitor szélessége, width.
var ContW=$("#container").outerWidth(); // Tartalom container szélessége, width.
var Ktwpb=$("#kijeloltterulet").outerWidth(); // Kijelölt terület width.(Beleértve paddingot és bordert is.)
var Ktwp=$("#kijeloltterulet").innerWidth(); // Kijelölt terület width.(Beleértve a paddingot, de a bordert nem.)
var Ktblr=Ktwpb-Ktwp; // Kijelölt területnél, border-left + border-right értéke.
var WEp=(MW-ContW-Ktblr) /2; // Left egerpozicióból, levonandó érték.
objLp=Lmod-WEp; // Objektum left pozíciója, objektumon billentyű nyomvatartásakor.
// A top érték meghatározás. -----------------------------------------------------------------------
var TpDiv=$("#TopDiv").innerHeight(); // A TopDiv magassága.
var KvTop=TpDiv+marginT; // Kijelölt terület, top pozíciója.
objTp=Tmod-KvTop; // Objektum top pozíciója, objektumon billentyű nyomvatartásakor.
// A mozgatható elemek beazonosítása. ----------------------------------------
var moe = $("#malakzat"); var moe2 = $("#malakzat2");
var moe3 = $("#malakzat3"); var moe4 = $("#malakzat4");
var moe5 = $("#malakzat5"); var moe6 = $("#malakzat6");
var moe7 = $("#malakzat7"); var moe8 = $("#malakzat8");
if(a==1) { moe.css("margin-top", objTp).css("margin-left", objLp); }
if(a==2) { moe2.css("margin-top", objTp).css("margin-left", objLp); }
if(a==3) { moe3.css("margin-top", objTp).css("margin-left", objLp); }
if(a==4) { moe4.css("margin-top", objTp).css("margin-left", objLp); }
if(a==5) { moe5.css("margin-top", objTp).css("margin-left", objLp); }
if(a==6) { moe6.css("margin-top", objTp).css("margin-left", objLp); }
if(a==7) { moe7.css("margin-top", objTp).css("margin-left", objLp); }
if(a==8) { moe8.css("margin-top", objTp).css("margin-left", objLp); }
}
Megjegyzés:
mousedown() - Egérbillentyű lenyomása. Bekövetkezik, ha a kiválasztott elemen, egérbillentyűt lenyomják.
mouseup() - Egérbillentyű felengedése. Bekövetkezik, ha a kiválasztott elemen, egérbillentyűt felengedték.
event.pageX - Visszaadja az egér pozícióját, dokumentum bal szélétől.
event.pageY - Visszaadja az egér pozícióját, dokumentum felső szélétől.