Untitled

<!DOCTYPE html>
<html>
<head>
<title>Przeciąganie i upuszczanie w html5</title>
<style>
body {background-color: #ddd; font-family:  arial, verdana, sans-serif;}
#drop1 {width: 200px;height: 200px; border:1px solid black;background-color: white}
#drag1 {widht: 50px; height: 50px;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTrransger.setData("Text",ev.target.id);
}

function drop(ev) {
var data = ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data);
ev.preventDefault();
}
window.onload = function() {
var dragged = document.getElementById("drag1");
var drophere = document.getElementById("drop1");
dragged.ondragstart = drag;
drophere.ondragover = allowDrop;
drophere.ondrop=drop;
}
</script>
</head>
<body>
<div id="drop1"></div>
<p>Przeciągnij poniższy obraz do pola znajdującego się powyżej: </p>
<img id="drag1" src="drag.gif" draggable="true"/>
</body>
</html>