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: 9 let
|
0