html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--NOT ADAPTED FOR MOBILE-->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14650111_952178031135_8958320028475725970_n.jpg?oh=ec3f7b3a1a538c3cba59645a2abf6e25&oe=5A546650" draggable="true" ondragstart="drag(event)" id="drag1" width="300" height="200">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
#div1, #div2 {
float: left;
width: 400px;
height: 300px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run