Autor Zpráva
ToJeOn
Profil *
Dobrý večer
mám kód co mi funguje v případě potřeby můžu i dodat. Je to div, kterým se pohybuje a tlačítko, kterým si zobrazím pozici toho divu. Problém je, že já bych potřeboval(nebo aspoň chtěl), aby se ta pozice(nápis) měnila současně s tím divem. Neví někdo o funkci nebo způsobu jak to udělat?
Dan Charousek
Profil
ToJeOn:
Ve funkci, která mění pozici toho divu (hýbe s ním) volej funkci, která se volá při stisknutí tlačítka, která ti zobrazí současnou pozici divu.
ToJeOn
Profil *
Tak to je, jde mi o to, aby tlačítko nebylo potřeba jestli mi rozumíte ... aby automaticky zobrazovalo pozici


když vložím document.write do te funkce tak zmizi objekt... potřeboval bych aby to ukazovalo neustále oboje
Dan Charousek
Profil
ToJeOn:
když vložím document.write do te funkce tak zmizi objekt
Tak to nevypisuj pomocí document.write, ale do nějakého divu pomocí vlastnosti innerHTML
ToJeOn
Profil *
A jak můžu pomocí JS vložit JS proměnnou do divu bez použití document.write? Mám dost mezery možná by bylo lepší, kdybystě mě třeba odkázal na nějáký komplexní tutorial JS :) Případně z čeho jste se učil vy.
lionel messi
Profil
ToJeOn:
A jak můžu pomocí JS vložit JS proměnnou do divu bez použití document.write?

Dan Charousek [#4]:
pomocí vlastnosti innerHTML
ToJeOn
Profil *
a hodnota toho innerHTML nemůže být div s proměnnýma vlastnostma podle pohybu, že? Resp dokud tam byly čísla vlastností fungovalo, když jsem z toho udělal další dic nefunguje... Mám hledat chyby nebo to prostě nejde?
Dan Charousek
Profil
ToJeOn:
Teď už si netrouvám věštit, dodej živou ukázku.
ToJeOn
Profil *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
   #presouvanyobjekt 
   {
    top:100px;
    left:300px;
    width:50px;
    height:50px;
    background: white;
    border-left: 30px solid navy;
    cursor: move;
    position: relative;
    }

  </style>
  

  </head>
  <body>
   
 <script>
function presun(presouvany) 
{



var souradnice = {x: 0, y: 0}; // výchozí umístění „left: 0; top: 0“
var posunSouradnice; // pro zjišťování posunu
var puvodniSouradnice; // souradnice prvku před posunem

presouvany.onmousedown = function(e) {
    var event = window.event || e;
    presouvany.setAttribute("data-move", "");
    puvodniSouradnice = {x : souradnice.x, y: souradnice.y};
    posunSouradnice = {
      x: event.clientX,
      y: event.clientY
    };
};

document.onmousemove = function(e) {
    if (!presouvany.hasAttribute("data-move")) return;
    var event = window.event || e;
    var x = puvodniSouradnice.x + event.clientX - posunSouradnice.x;
    var y = puvodniSouradnice.y + event.clientY - posunSouradnice.y;
    
    souradnice.x = x;
    souradnice.y = y;
    presouvany.style.left = x + "px";
    presouvany.style.top = y + "px";
    var el = document.getElementById("ukazka");
    el.innerHTML = "<div style='top:"+ x +" px; left:"+ y +" px; width:20px; height:20px; background-color:red;'></div>";
     
};


document.onmouseup = presouvany.onmouseup = function() {
    presouvany.removeAttribute("data-move");
};
};
function ukaz()
{
        var x = $("div").presouvanyobjekt.offset();
        var leva = x.left;
        var dolni = x.top;
        alert("dolni:"+dolni+" leva:"+leva);
}


 
  </script>
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="ukazka"></div>
<div id="presouvanyobjekt" onDblClick='presun(document.querySelector("#presouvanyobjekt"));'>  
 <div style="border-width: 1px; border-style: solid; border-color: blue">
 </div></div>

  </body>
</html>
Cílem prostě je aby se ten div pohyboval i s tím objektem aby reagoval na jeho pohyb... Ale je to dílčí cíle neříkejte mi dej ho dovnitř to je jednoduchý :D
Chtěl bych mít takové hýblátka 2 a zvětšovat a zmenšovat s nimi ten červeny div :) to už by mohlo být jednodušší jestli to teda bude reagovat na pohyb oč se celou dobu snažím... :)
Dan Charousek
Profil
Není to úplně šťastné a bylo by na dýl tu s tebou řešit optimalizaci, ale důvody proč se tvůj div nehýbe jsou dva:

1) nemá nastavené position:relative
2) při vepisování souřadnic máš před "px" mezery

el.innerHTML = "<div style='top:"+ x +"px; left:"+ y +"px; width:20px; height:20px; background-color:red; position:relative'></div>";

A ještě bys měl zaměnit x a y, přeci jen x má být horizontální nebo-li left a y vertikální - top.
ToJeOn
Profil *
Děkuji moc vůbec mi to nedošlo... Moc jste mi pomohli :)
ToJeOn
Profil *
Přesto se můj div nehýbe, Vám to funguje? :o

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: