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
<title>Jednoduchý drag & drop elementu s využitím transform</title> <h1>Jednoduchý přesun elementu s využitím <code>transform</code></h1> <div id="presouvany-element"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#presouvany-element { width: 100px; height: 100px; background: #000; cursor: move; } #presouvany-element[data-move] { /* styl pro přesun */ background: #ccc; }
CSS
Autoformát
CSS reset
Až na konci
var presouvany = document.querySelector("#presouvany-element"); 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>