<!DOCTYPE html>
<html>
<head>
<title>Drag and drop</title>
<script>
var dragme;
var target;
window.onload = function() {
dragme = document.getElementById('dragme');
target = document.getElementById('target');
dragme.addEventListener('dragstart', drag_start, false);
target.addEventListener('dragover', drag_over, false);
target.addEventListener('drop', drop, false);
}
function drag_start(event) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', 'data');
}
function drag_over(event) {
if (event.preventDefault)
event.preventDefault();
event.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function drop(event) {
event.stopPropagation();
this.appendChild(dragme.parentNode.removeChild(dragme), this);
return false;
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="target" style="width: 200px; height: 200px; border: 1px solid red;" dropzone="true">
</div>
<div id="source">
<div id="dragme" style="width: 100px; height: 10px; outline: 1px solid green;" draggable="true">
dragme
</div>
</div>
<input type="range" min="1" max="100" value="50" id="slider_range">
</body>
</html>