42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
|
|
<title>Document</title>
|
|
<style>
|
|
#div1,
|
|
#div2 {
|
|
float: left;
|
|
width: 200px;
|
|
height: 40px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Drag and Drop Example</h2>
|
|
<p>Drag the image between the boxes</p>
|
|
<div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'>
|
|
<img src='https://study.com/images/reDesign/global/logo.png' draggable='true' ondragstart='drag(event)' id='drag1' width='195' height='35'>
|
|
</div>
|
|
<div id='div2' ondrop='drop(event)' ondragover='allowDrop(event)'></div>
|
|
<script>
|
|
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));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |