| Autor | Zpráva | ||
|---|---|---|---|
| ToJeOn Profil * |
#1 · Zasláno: 12. 12. 2015, 21:42:01
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 |
#2 · Zasláno: 12. 12. 2015, 21:44:12
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 |
#4 · Zasláno: 12. 12. 2015, 22:18:51
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 * |
#5 · Zasláno: 12. 12. 2015, 22:32:33
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 |
#6 · Zasláno: 12. 12. 2015, 22:37:15
|
||
| ToJeOn Profil * |
#7 · Zasláno: 13. 12. 2015, 15:12:07
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 |
#8 · Zasláno: 13. 12. 2015, 15:30:45
ToJeOn:
Teď už si netrouvám věštit, dodej živou ukázku. |
||
| ToJeOn Profil * |
#9 · Zasláno: 13. 12. 2015, 15:36:09
<!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>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 |
#10 · Zasláno: 13. 12. 2015, 16:07:20
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 * |
#11 · Zasláno: 14. 12. 2015, 11:59:21
Děkuji moc vůbec mi to nedošlo... Moc jste mi pomohli :)
|
||
| ToJeOn Profil * |
#12 · Zasláno: 14. 12. 2015, 15:09:22
Přesto se můj div nehýbe, Vám to funguje? :o
|
||
|
Časová prodleva: 8 let
|
|||
0