Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="divpapa"> <div id="zaklad" onmousedown="presunBox('#zaklad')">AHOJ<div class="syn1" onmousedown="presunBox('.syn1')">A</div><div class="syn2" onmousedown="presunBox('.syn2')">B</div><div style="height:30px;text-align:center;border:1px solid #f00"> ZDE </div></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#divpapa {position:relative;z-index:20;border:1px solid #00a;} #zaklad {position:relative;width:100px;height:140px;background:#00FFFF;cursor:move;} #zaklad[data-moved] {background:#ccc;} .syn1, .syn2 {width:80px;height:40px;background:#0c0;border:1px solid #000} .syn1[data-pro] {background:#f00;}
CSS
Autoformát
CSS reset
Až na konci
function presunBox(az){ var sunbox = document.querySelector(az); var souradnice = {x: 0, y: 0}, puvodnistav, posun; var parentDiv = sunbox.parentNode; if (parentDiv.id!=="divpapa") document.querySelector("#"+parentDiv.id).onmousemove = null; document.onmousedown = sunbox.onmousedown = function(e) { var events = window.event || e; sunbox.setAttribute("data-moved", ""); sunbox.setAttribute("data-pro", ""); puvodnistav = {x : souradnice.x, y: souradnice.y}; posun = { x: events.clientX, y: events.clientY }; }; document.onmousemove = sunbox.onmousemove = function(e) { if (!sunbox.hasAttribute("data-moved")) return; if (!sunbox.hasAttribute("data-pro")) return; var events = window.event || e; var x = puvodnistav.x + events.clientX - posun.x; var y = puvodnistav.y + events.clientY - posun.y; souradnice.x = x; souradnice.y = y; sunbox.style.transform = "translate(" + x + "px, " + y + "px)"; }; document.onmouseup = sunbox.onmouseup = function(e) { document.onmousedown = null; sunbox.removeAttribute("data-moved"); sunbox.removeAttribute("data-pro"); }; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>