xgqfrms-GitHub/HTML5 Drag and Drop.html

## HTML5 Drag and Drop.html
<!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>
	<!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>