html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--Created By Ehab Samir-->
<!-- ontouchmove="myFunction(event)"-->
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Example</title>
</head>
<body>
<h2>Drag and Drop Example</h2>
<h4>Drag Flag from Red Box to Green Box and Vice Versa .</h4>
<p>Red Box contains <span id="rcount">6</span> flags, and Green Box contains <span id="gcount">0</span> flags</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.pngall.com/wp-content/uploads/2016/05/Morocco-Flag-Download-PNG.png" draggable="true" ondragstart="drag(event)" id="Morocco" width="60" height="40">
<img src="http://www.pngall.com/wp-content/uploads/2016/05/Bosnia-And-Herzegovina-Flag-Free-Download-PNG.png" draggable="true" ondragstart="drag(event)" id="Posnia" width="60" height="40">
<img src="http://www.pngall.com/wp-content/uploads/2016/05/Oman-Flag-Transparent.png" draggable="true" ondragstart="drag(event)" id="Oman" width="60" height="40">
<img src="http://www.pngall.com/wp-content/uploads/2017/05/Brazil-Flag-Free-Download-PNG.png" draggable="true" ondragstart="drag(event)" id="Brazil" width="60" height="40">
<img src="http://www.pngall.com/wp-content/uploads/2016/05/New-Zealand-Flag-Free-Download-PNG.png" draggable="true" ondragstart="drag(event)" id="NewZealand" width="60" height="40">
<img src="http://www.pngall.com/wp-content/uploads/2016/05/Turkey-Flag-Free-Download-PNG.png" draggable="true" ondragstart="drag(event)" id="Turkey" width="60" height="40">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<h5 id="msg">Drag and Drop Status ...</h5>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Created By Ehab Samir */
#div1 {
float: left;
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 3px solid #aa2222;
background-color: #ff5555;
}
#div2 {
float: left;
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border: 3px solid #22aa22;
background-color: #55ff55;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Created By Ehab Samir */
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
document.getElementById("msg").innerHTML = "Dragging " + ev.target.id + " Flag";
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
document.getElementById("msg").innerHTML = "" + data + " Flag was dropped";
document.getElementById("rcount").innerHTML = document.getElementById("div1").childElementCount;
document.getElementById("gcount").innerHTML = document.getElementById("div2").childElementCount;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run