Autor Zpráva
demonek@seznam.cz
Profil
Ahoj,
V nasledujicim kodu chytam div “posuvny” a presouvam ho mysi. Aktualne ho pomoci promenych vzdalenostx=100;vzdalenosty=50; chytam vzdy za prostredek a to funguje. Zkousel jsem vypocist promene vysledekx a vysledeky, ktere by se menily podle toho kde div chytim a mohl jsem ho tedy tahnout za libovolne misto. Prestoze mi ta cisla vychazi, viz  promene vysledekx a vysledeky v divu obrazovka, tak kdyz je doplnim do prikazu pro vykresleni na misto promenych  vzdalenosty a vzdalenostx. Tak se mi to hybat prestane. Zvlastni je, ze kdyz zmenim prvni radek v nize uvedene definici tak se to prestane hybat uplne a kdyz jen druhy, tak mi to v jednom smeru jede a to i kdyz ty radky prohazuji mezi sebou. Vzdy to jede v tom smeru, ktery mam na te druhe radce a v tomto smeru mi i funguje to uchopeni mimo stred divu, takze to zjevne pocita dobre.  Druha vec je,proc se mi CSS definice nenacte v javascriptu  coz je videt kdyz se podivate do divu obrazovka na promene currtop a currleft, ktere by meli hned na zacatku vypsat souradnice leveho horniho rohu divu posuvny definovaneho v CSS v hlavicce a neudelaji to dokud s divem nezacnu hybat. 
 
Funguje tazenim za prostredek:       
       oPosuvny.style.top = ev.clientY-vzdalenosty +"px";
       oPosuvny.style.left = ev.clientX-vzdalenostx +"px";

                                          =
Nefunguje:
       oPosuvny.style.top = ev.clientY- vysledeky +"px";
       oPosuvny.style.left = ev.clientX- vysledekx +"px";

Cely kod:
<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title></title>
    <meta charset='windows-1250'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
  <style type="text/css">
  body{margin:0;}
  #podlozka {height:100%;width:100%;background-color:lightgreen;position:absolute;}
  #posuvny  {height:100px;width:200px;background-color:lightblue;position:absolute;top:100px; left:100px;}
  #obrazovka {height:200px;width:200px;background-color:yellow;position:absolute;top:500px; left:800px;}   
  </style>
  
  <script type="text/javascript">
  var uchopeno=false; //alert(uchopeno);
  var currtop;
  var currleft;
  var vzdalenostx;
  var vzdalenosty;
  var vysledekx;
  var vysledeky;
  

  function posouvej(ev){
   oPosuvny=document.getElementById("posuvny");
   currtop=oPosuvny.style.top;
   currleft=oPosuvny.style.left;
   
   if(uchopeno){
    vzdalenostx=100;
    vzdalenosty=50;
    vysledekx = ev.clientX-parseInt(currleft); 
    vysledeky = ev.clientY-parseInt(currtop);
       
       oPosuvny.style.top = ev.clientY-vzdalenosty +"px";
       oPosuvny.style.left = ev.clientX-vzdalenostx +"px";
       //dodelat posun jako drag and drop
   } 
  }
  
  function vypisstav(ev){
   document.getElementById('obrazovka').innerHTML=
   'X:'+ev.clientX+'<br />'+
   'Y:'+ev.clientY+'<br />'+
   'Uchopeno:'+uchopeno+
   '<br />Currtop:'+currtop+
   '<br />Currleft:'+currleft+
   '<br />Vzdalenosty:'+vzdalenosty+
   '<br />Vzdalenostx:'+vzdalenostx+
   '<br />Vysledekx:'+vysledekx+
   '<br />Vysledeky:'+vysledeky
   ;
  }
      
  </script>  
    
  </head>
  <body onLoad="vypisstav(event)"> 
  <div id="podlozka" onmousemove="posouvej(event);vypisstav(event);">  
   
   </div>
  
  <div id="posuvny" onmousedown="uchopeno=true;vypisstav(event);" 
                    onmouseup="uchopeno=false;vypisstav(event);"  
                    onmousemove="posouvej(event);vypisstav(event);"> 
  </div>
  
  <div id="obrazovka">
  </div> 
  </body>
</html>
Fisir
Profil
Reaguji na demonek@seznam.cza:
Prosím, když už kopíruješ svůj dotaz přes všechny možné diskuse, dej si pozor, jak se to zpracuje. Dík.
demonek@seznam.cz
Profil
Fisir:
Uplne nerozumim.Co je spatne?


Fisir:
Text jsem mozna vkladal z mailu, tak jestli je problem v tom, zkusim ho vlozit jeste jednou:

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title></title>
    <meta charset='windows-1250'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
  <style type="text/css">
  body{margin:0;}
  #podlozka {height:100%;width:100%;background-color:lightgreen;position:absolute;}
  #posuvny  {height:100px;width:200px;background-color:lightblue;position:absolute;top:100px; left:100px;}
  #obrazovka {height:200px;width:200px;background-color:yellow;position:absolute;top:500px; left:800px;}   
  </style>
  
  <script type="text/javascript">
  var uchopeno=false; //alert(uchopeno);
  var currtop;
  var currleft;
  var vzdalenostx;
  var vzdalenosty;
  var vysledekx;
  var vysledeky;
  

  function posouvej(ev){ 
   oPosuvny=document.getElementById("posuvny");
   currtop=oPosuvny.style.top;
   currleft=oPosuvny.style.left;
   
   if(uchopeno){
    vzdalenostx=100;
    vzdalenosty=50;
    vysledekx = ev.clientX-parseInt(currleft); 
    vysledeky = ev.clientY-parseInt(currtop);
       
       
       oPosuvny.style.left = ev.clientX-vzdalenostx +"px";
       oPosuvny.style.top = ev.clientY-vzdalenosty +"px";
       //dodelat posun jako drag and drop
   } 
  }
  
  function vypisstav(ev){
   document.getElementById('obrazovka').innerHTML=
   'X:'+ev.clientX+'<br />'+
   'Y:'+ev.clientY+'<br />'+
   'Uchopeno:'+uchopeno+
   '<br />Currtop:'+currtop+
   '<br />Currleft:'+currleft+
   '<br />Vzdalenosty:'+vzdalenosty+
   '<br />Vzdalenostx:'+vzdalenostx+
   '<br />Vysledekx:'+vysledekx+
   '<br />Vysledeky:'+vysledeky
   ;
  }
      
  </script>  
    
  </head>
  <body onLoad="vypisstav(event)"> 
  <div id="podlozka" onmousemove="posouvej(event);vypisstav(event);">  
   
   </div>
  
  <div id="posuvny" onmousedown="uchopeno=true;vypisstav(event);" 
                    onmouseup="uchopeno=false;vypisstav(event);"  
                    onmousemove="posouvej(event);vypisstav(event);"> 
  </div>
  
  <div id="obrazovka">
  </div> 
  </body>
</html>

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: