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" class="moveable">AHOJ <div class="syn1 moveable">A</div> <div class="syn2 moveable">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; height: 200vh; } #zaklad { position: relative; width: 100px; height: 140px; background: #00FFFF; cursor: move; } #zaklad[data-moved] { background: #ccc; } .moveable{ position: relative; } .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() { var moveableElements = document.getElementsByClassName("moveable"); for (var i = 0; i < moveableElements.length; i++) { (function(element) { var deltaX, deltaY, isMouseDown; var onDown = function(e) { if (typeof TouchEvent != 'undefined' && e instanceof TouchEvent) { e = e.touches[0]; } deltaX = e.clientX - (parseInt(element.style.left) || 0) deltaY = e.clientY - (parseInt(element.style.top) || 0) isMouseDown = true; e.preventDefault(); e.stopPropagation(); return false; }; var onUp = function(e) { isMouseDown = false; e.preventDefault(); e.stopPropagation(); return false; }; var onMove = function(e) { if (isMouseDown) { if (typeof TouchEvent != 'undefined' && e instanceof TouchEvent) { e = e.touches[0]; } element.style.left = (e.clientX - deltaX) + 'px'; element.style.top = (e.clientY - deltaY) + 'px'; } e.preventDefault(); e.stopPropagation(); return false; }; element.addEventListener('mousedown', onDown); element.addEventListener('touchstart', onDown); document.addEventListener('mouseup', onUp); document.addEventListener('touchend', onUp); document.addEventListener('mousemove', onMove); document.addEventListener('touchmove', onMove); })(moveableElements[i]); } })();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>