WilliamTomOBrien/drag-and-drop.html

## drag-and-drop.html
<!DOCTYPE HTML>
<html>
	<head>
		<script>
		  const events = [];
		  function allowDrop(ev) {
			  ev.preventDefault();
		  }

		  function dragStart(ev) {
			  ev.dataTransfer.setData("text", ev.target.id);
		  }

		  function dragDrop(ev) {
			  ev.preventDefault();
			  var data = ev.dataTransfer.getData("text");
			  ev.target.appendChild(document.getElementById(data));
		  }

		  function updateEventsList() {
			let eventListElement = document.getElementById("eventsList");
			eventListElement.innerText = events.join(",\r\n");
		  }

		  addEventListener("dragstart", (event) => { console.log({ dragstart: event }); events.push("dragstart"); updateEventsList(); });
		  addEventListener("dragover", (event) => { console.log({ dragover: event }); events.push("dragover"); updateEventsList(); });
		  addEventListener("dragenter", (event) => { console.log({ dragenter: event }); events.push("dragenter"); updateEventsList(); });
		  addEventListener("dragleave", (event) => { console.log({ dragleave: event }); events.push("dragleave"); updateEventsList(); });
		  addEventListener("dragend", (event) => { console.log({ dragend: event }); events.push("dragend"); updateEventsList(); });
		  addEventListener("drop", (event) => { console.log({ drop: event }); events.push("drop"); updateEventsList(); });
		</script>
		<style>
		  .div1 {
			  width: 240px;
			  height: 75px;
			  padding: 10px;
			  margin: 5px;
			  border: 1px solid black;
			  background-color: #F5F5F5;
		  }

		  p {
			  font-size: 20px;
			  font-weight: bold;
		  }

		  .header {
			  font-size: 40px;
			  color: #009900;
			  font-weight: bold;
		  }

		  .draggeddiv {
			  border: 1px solid black;
			  background-color: powderblue;
			  width: 220px;
			  height: 70px;
			  float: left;
		   }


		</style>
	</head>

	<body>
		<div class="header">Example</div>
		<p>Drag and Drop in Boxes</p>
		<div class="div1"
			 ondrop="dragDrop(event)"
			 ondragover="allowDrop(event)">
			<div id="drag1"
			  draggable="true"
			  ondragstart="dragStart(event)"
			  class="draggeddiv">
			</div>
		</div>
		<div class="div1"
			 ondrop="dragDrop(event)"
			 ondragover="allowDrop(event)">
		</div>
		<div id="eventsList"></div>
	</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script>
	const events = [];
	function allowDrop(ev) {
	ev.preventDefault();
	}

	function dragStart(ev) {
	ev.dataTransfer.setData("text", ev.target.id);
	}

	function dragDrop(ev) {
	ev.preventDefault();
	var data = ev.dataTransfer.getData("text");
	ev.target.appendChild(document.getElementById(data));
	}

	function updateEventsList() {
	let eventListElement = document.getElementById("eventsList");
	eventListElement.innerText = events.join(",\r\n");
	}

	addEventListener("dragstart", (event) => { console.log({ dragstart: event }); events.push("dragstart"); updateEventsList(); });
	addEventListener("dragover", (event) => { console.log({ dragover: event }); events.push("dragover"); updateEventsList(); });
	addEventListener("dragenter", (event) => { console.log({ dragenter: event }); events.push("dragenter"); updateEventsList(); });
	addEventListener("dragleave", (event) => { console.log({ dragleave: event }); events.push("dragleave"); updateEventsList(); });
	addEventListener("dragend", (event) => { console.log({ dragend: event }); events.push("dragend"); updateEventsList(); });
	addEventListener("drop", (event) => { console.log({ drop: event }); events.push("drop"); updateEventsList(); });
	</script>
	<style>
	.div1 {
	width: 240px;
	height: 75px;
	padding: 10px;
	margin: 5px;
	border: 1px solid black;
	background-color: #F5F5F5;
	}

	p {
	font-size: 20px;
	font-weight: bold;
	}

	.header {
	font-size: 40px;
	color: #009900;
	font-weight: bold;
	}

	.draggeddiv {
	border: 1px solid black;
	background-color: powderblue;
	width: 220px;
	height: 70px;
	float: left;
	}


	</style>
	</head>

	<body>
	<div class="header">Example</div>
	<p>Drag and Drop in Boxes</p>
	<div class="div1"
	ondrop="dragDrop(event)"
	ondragover="allowDrop(event)">
	<div id="drag1"
	draggable="true"
	ondragstart="dragStart(event)"
	class="draggeddiv">
	</div>
	</div>
	<div class="div1"
	ondrop="dragDrop(event)"
	ondragover="allowDrop(event)">
	</div>
	<div id="eventsList"></div>
	</body>
	</html>