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="presouvany" draggable="true" ondragstart="drag(event)"> Obsah k přesouvání. </div> <div class="kontejner" ondrop="onDrop(event); removeClass(this, 'najeto')" ondragenter="this.className += ' najeto'" ondragleave="removeClass(this, 'najeto')" ondragover="prevent(event)"> </div> <div class="kontejner" ondrop="onDrop(event); removeClass(this, 'najeto')" ondragenter="this.className += ' najeto'" ondragleave="removeClass(this, 'najeto')" ondragover="prevent(event)"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.kontejner {background: #DA3F94; color: #fff; width: 200px; height: 100px; margin: .2em} .kontejner.najeto {opacity: .8} #presouvany {cursor: move}
CSS
Autoformát
CSS reset
Až na konci
function removeClass(el, cName) { el.className = el.className.replace(cName, ""); } function prevent(e) { e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue = false; } function drag(e) { e = e || window.event; var targetEl = e.target || e.srcElement; e.dataTransfer.setData('Text', targetEl.id); } function onDrop(e) { e = e || window.event; var targetEl = e.target || e.srcElement; var data = e.dataTransfer.getData("Text"); prevent(e); targetEl.appendChild(document.getElementById(data)); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>