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
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/default.css" /> <title>Mladá Fronta a.s.</title> </head> <body> <div id="header"> <br><p><br></p> </div> <div id="content"> <div id="atom">MLADÁ FRONTA a.s.</div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#atom{ border:1px solid black; }
CSS
Autoformát
CSS reset
Až na konci
var presouvany = document.querySelector("#atom"); 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.transform = "translate(" + x + "px, " + y + "px)"; }; document.onmouseup = presouvany.onmouseup = function() { presouvany.removeAttribute("data-move"); };
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>