Untitled

<!DOCTYPE html>

<head>
	<script>
		/*
		*  CREDIT: https://stackoverflow.com/questions/10588607/tutorial-for-html5-dragdrop-sortable-list
		*/
		const fruit = ["Apples 🍎", "Oranges 🍊", "Bananas 🍌", "Peaches 🍑", "Watermelons 🍉", "Grapes 🍇", "Kiwi 🥝"];
		var _el;


		function dragOver(e) {
			console.log("dragOver")
			if (isBefore(_el, e.target))
				e.target.parentNode.insertBefore(_el, e.target);
			else
				e.target.parentNode.insertBefore(_el, e.target.nextSibling);
		}

		function dragStart(e) {
			console.log("dragStart")
			e.dataTransfer.effectAllowed = "move";
			e.dataTransfer.setData("text/plain", null);
			_el = e.target;
		}

		function isBefore(el1, el2) {
			if (el2.parentNode === el1.parentNode)
				for (var cur = el1.previousSibling; cur && cur.nodeType !== 9; cur = cur.previousSibling)
					if (cur === el2)
						return true;
			return false;
		}

		function createList() {
		let list = document.getElementById("list");

		let html = "";
		fruit.forEach((item) => {
			html = html + "<li><div class=\"fruit\" draggable=true ondragover=\"dragOver(event)\" ondragstart=\"dragStart(event)\">";
		    html = html + item;
			html = html + "</div></li>"

		});

		list.innerHTML = html;
		}
	</script>
	<style>
		li {
			margin: 1px;
		}
		.fruit {
			user-select: none;
			width: 200px;
			border-style: solid;
			border-width: 1px;
			border-color: gray;
			padding: 10px;
			text-align: center;
		}
	</style>
</head>

<body>
	<ul id="list" style="list-style-type:none;font-size: 18pt; font-weight:bold;"></ul>
</body>
<script>
	createList();
</script>

</html>