| Autor | Zpráva | ||
|---|---|---|---|
| demonek@seznam.cz Profil |
#1 · Zasláno: 7. 10. 2013, 16:26:40
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 |
#2 · Zasláno: 7. 10. 2013, 17:52:09 · Upravil/a: Moderátor (editace znemožněna) 9. 10. 2013, 08:22:23
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 |
#3 · Zasláno: 8. 10. 2013, 13:59:43 · Upravil/a: demonek@seznam.cz
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> |
||
|
Časová prodleva: 11 let
|
|||
0