Skip to content

Instantly share code, notes, and snippets.

@devdays

devdays/draganddrop-sample.html

Created December 2, 2014 04:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devdays/4128ca3b248f0233744e to your computer and use it in GitHub Desktop.
Save devdays/4128ca3b248f0233744e to your computer and use it in GitHub Desktop.
Download ZIP
Drag and Drop Sample
Raw
draganddrop-sample.html
<!DOCTYPE HTML>
<html>
<head>
<title>Drag Logo</title>
<style type="text/css">
#dropOnMe {
width: 210px;
height: 136px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Id", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Id");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p draggable="false">Drag the image into the rectangle:</p>
<div id="dropOnMe" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="dragImage" src="images/nextechpress.png" draggable="true"
ondragstart="drag(event)">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment