Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub
Created October 8, 2017 15:24
Show Gist options
  • Save xgqfrms-GitHub/c03b4464649469508557f7fb84629d30 to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/c03b4464649469508557f7fb84629d30 to your computer and use it in GitHub Desktop.
HTML5 Drag and Drop
<!DOCTYPE html>
<html lang="zh-Hans">
<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>Drag and Drop</title>
<style>
#div1,
#div2 {
float: left;
width: 320px;
height: 320px;
margin: 5px;
padding: 5px;
box-sizing: border-box;
border: 1px solid black;
}
</style>
</head>
<body>
<section>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
</section>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://cdn.xgqfrms.xyz/logo/icon.png" draggable="true" ondragstart="drag(event)" id="drag1" width="300" height="300">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!-- js -->
<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>
@xgqfrms
Copy link

xgqfrms commented Mar 24, 2021

ondrop
ondragstart
ondragover
dragend

draggable="true"

@xgqfrms
Copy link

xgqfrms commented Mar 24, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment