Intrebari coordonate element in pagina

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Avatar utilizator
steell
Mesaje:190

Intrebari coordonate element in pagina

Salut marplo.
Vreau sa fac un joc in JavaScript (Hanoi Tower , daca il sti).
Am o variabila = 0
Vreau ca atunci cand un element ete tras si aruncat in acea tija sa se puna pe axa verticala la coordonata variabila+ceva(unde ceva este un numar = cu latimea discului).
Apoi variabila sa ia o noua valoare egala cu cea a coordonatei verticale a elementului pe care lam pus anterior
astfel incat urmatorul welement va fi pus la coordonata variabila+ceva-de-la-primul-element+ceva-de-la-al-doilea
Ceea ce nu stiu este cum sa obtin coordonata Y a obiectului dupa ce iam dat drumul pe tija.
Niste idei daca ai cum as putea face asta si cateva exemple sa fac ce am scris mai sus pentru ca nu gasesc instructiunile respective m-am incurcat in ele.

Alta intrebare:
Cum fac ca atunci cand dau click p un element (o imagine) aceasta sa fie mutata la alte coordonate x si y ?
Exista vreo instructiune care sa seteze coordonate unui element ?

MarPlo Mesaje:4343
Salut
Nu ma pricep la crearea de jocuri, iti pot da raspuns la intrebari cu niste exemple pe care le poti aplica /adapta cum stii la scriptul tau.

1. Ca sa afli pozitia X, Y a unui element in pagina, poti folosi functia "getPos()" din acest cod. Returneaza un obiect cu 2 proprietati: x si y, care reprezinta cordonatele.

Cod: Selectaţi tot

<button id="btn2" onclick="testGetPos(this.id)">Get Pos</button>
<script type="text/javascript"><!--
// returneaza un obiect cu coordonatele X, Y (www.coursesweb.net/)
function getPos(id) {
  var el = document.getElementById(id);
  for (var lx=0, ly=0;
   el != null;
   lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);

  return {x: lx, y: ly};
}

// functie pt test, afiseaza Alert cu pozitia X, Y
function testGetPos(id) {
  var coords = getPos(id);      // preia obiectul cu coordonatele
  alert('X= '+ coords.x+ ' / Y='+coords.y);
}
//-->
</script>
2. Ca sa muti un element in pagina la anumite coordonate, trebui sa aibe setat position:absolute;, apoi, cu proprietatile CSS, top si left se defineste pozitia.
Exemplu:

Cod: Selectaţi tot

<button id="btn" onclick="changePos(this.id)">Click</button>
<script type="text/javascript"><!--
// seteaza coordonatele X si Y
var xp = '125px';
var yp = '200px';

// muta elementul la pozitia xp si yp (www.coursesweb.net/)
function changePos(id){
  var elm = document.getElementById(id);
  elm.style.position = 'absolute';        // seteaza position:absolute;
  elm.style.top = xp;
  elm.style.left = yp;
}
//-->
</script>

Subiecte similare