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
27
28
<!--found and modified this example from https://www.tutorialspoint.com/index.htm-->
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px;-moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; margin-left:150px; position: absolute;} </style>
<script type = "text/javascript">
function dragStart(event) {
event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData("Text", event.target.getAttribute('id')); event.dataTransfer.setDragImage(event.target,0,0);
return true; }
function dragEnter(event) {
event.preventDefault();
return true; }
function dragOver(event) {
return false; } function dragDrop(event) {
var src = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(src)); event.stopPropagation(); return false; }
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id = "boxA" draggable = "true" ondragstart = "return dragStart(event)">
<p>Drag Me</p>
</div>
<div id = "boxB" ondragenter = "return dragEnter(event)" ondrop = "return dragDrop(event)" ondragover = "return dragOver(event)">Dustbin </div>
</center>
</body>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run