haleyrc · January 30, 2024 16:46
diff --git a/dragondrop.html b/dragondrop.html
 <!doctype html>
 <html>
  <head>
    <title>Dragon Drop</title>
    <style>
      :root {
        --background-color: #181824;
        --text-color: #fff;

        --scrollbar-thumb-color: #fff;
        --scrollbar-track-color: #0d0d18;
        --scrollbar-width: 15px;
      }

      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      html {
        height: 100%;
        font-family: system-ui, sans-serif;
      }

      body {
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        padding-top: 2rem;
        margin: auto;
        color: var(--text-color);
        background-color: var(--background-color);
        cursor: default;
      }

      :root {
        --primary-bg-color: #0d0d16;
        --secondary-bg-color: #2b002b;
        --draggable-border-color: #ff00ff;
        --dropzone-border-color: #00ff3c;
        --text-color: #fff;
        --hover-bg-color: #2b002b;
        --dropzone-text-color: #28a745;
      }

      div {
        box-sizing: border-box;
        padding: 1em;
        margin-bottom: 1em;
        text-align: center;
        transition: all 0.3s ease;
        user-select: none;
      }

      div[draggable] {
        margin-top: 1rem;
      }

      #source {
        width: 300px;
        font-weight: bold;
        line-height: 50px;
        background-color: var(--primary-bg-color);
        border: 3px dashed var(--draggable-border-color);
        border-radius: 8px;
        cursor: grab;
      }

      #source:hover {
        background-color: var(--hover-bg-color);
      }

      #destination {
        justify-content: center;
        align-items: center;
        width: 300px;
        min-height: 200px;
        color: var(--dropzone-text-color);
        background-color: var(--primary-bg-color);
        border: 3px dashed var(--dropzone-border-color);
        border-radius: 8px;
      }

      #destination div {
        background-color: var(--secondary-bg-color);
        border: 3px dashed var(--draggable-border-color);
      }

      strong {
        color: var(--text-color);
      }
    </style>
    <script>
      function onStartDrag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function onDrop(ev) {
        ev.preventDefault();
        // Retrieve data from drag
        const id = ev.dataTransfer.getData("text");

 				console.log({id, target: ev.target.id});

        if (id == "source" && ev.target.id == "destination") {
          const nodeCopy = document.getElementById(id).cloneNode(true);
          nodeCopy.id = "newId";
          ev.target.appendChild(nodeCopy);
        }

        ev.currentTarget.style.background = "";
      }

      function onDragOver(ev) {
        ev.preventDefault();
      }

      function onDragEnter(ev) {
        ev.currentTarget.style.background = "#0a0a15";
      }

      function onDragLeave(ev) {
        ev.currentTarget.style.background = "#2b002b";
      }

      function onEndDrag(ev) {
        ev.target.style.border = "3px dashed #ff00ff";
      }
    </script>
  </head>

  <body>
    <div
      draggable="true"
      id="source"
      ondragstart="onStartDrag(event);"
      ondragend="onEndDrag(event);"
    >
      <strong>Element</strong>
    </div>

    <div
      id="destination"
      ondrop="onDrop(event);"
      ondragover="onDragOver(event);"
      ondragenter="onDragEnter(event);"
      ondragleave="onDragLeave(event);"
    >
      <strong>Drop Zone</strong>
    </div>
 		<footer>
 			<p>Courtesy https://front.tips/drag-drop-elements-datatransfer-interface/</p>
 			<p>Reference: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer</p>
 		</footer>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Dragon Drop</title>
	<style>
	:root {
	--background-color: #181824;
	--text-color: #fff;

	--scrollbar-thumb-color: #fff;
	--scrollbar-track-color: #0d0d18;
	--scrollbar-width: 15px;
	}

	* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}

	html {
	height: 100%;
	font-family: system-ui, sans-serif;
	}

	body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding-top: 2rem;
	margin: auto;
	color: var(--text-color);
	background-color: var(--background-color);
	cursor: default;
	}

	:root {
	--primary-bg-color: #0d0d16;
	--secondary-bg-color: #2b002b;
	--draggable-border-color: #ff00ff;
	--dropzone-border-color: #00ff3c;
	--text-color: #fff;
	--hover-bg-color: #2b002b;
	--dropzone-text-color: #28a745;
	}

	div {
	box-sizing: border-box;
	padding: 1em;
	margin-bottom: 1em;
	text-align: center;
	transition: all 0.3s ease;
	user-select: none;
	}

	div[draggable] {
	margin-top: 1rem;
	}

	#source {
	width: 300px;
	font-weight: bold;
	line-height: 50px;
	background-color: var(--primary-bg-color);
	border: 3px dashed var(--draggable-border-color);
	border-radius: 8px;
	cursor: grab;
	}

	#source:hover {
	background-color: var(--hover-bg-color);
	}

	#destination {
	justify-content: center;
	align-items: center;
	width: 300px;
	min-height: 200px;
	color: var(--dropzone-text-color);
	background-color: var(--primary-bg-color);
	border: 3px dashed var(--dropzone-border-color);
	border-radius: 8px;
	}

	#destination div {
	background-color: var(--secondary-bg-color);
	border: 3px dashed var(--draggable-border-color);
	}

	strong {
	color: var(--text-color);
	}
	</style>
	<script>
	function onStartDrag(ev) {
	ev.dataTransfer.setData("text", ev.target.id);
	}

	function onDrop(ev) {
	ev.preventDefault();
	// Retrieve data from drag
	const id = ev.dataTransfer.getData("text");

	console.log({id, target: ev.target.id});

	if (id == "source" && ev.target.id == "destination") {
	const nodeCopy = document.getElementById(id).cloneNode(true);
	nodeCopy.id = "newId";
	ev.target.appendChild(nodeCopy);
	}

	ev.currentTarget.style.background = "";
	}

	function onDragOver(ev) {
	ev.preventDefault();
	}

	function onDragEnter(ev) {
	ev.currentTarget.style.background = "#0a0a15";
	}

	function onDragLeave(ev) {
	ev.currentTarget.style.background = "#2b002b";
	}

	function onEndDrag(ev) {
	ev.target.style.border = "3px dashed #ff00ff";
	}
	</script>
	</head>

	<body>
	<div
	draggable="true"
	id="source"
	ondragstart="onStartDrag(event);"
	ondragend="onEndDrag(event);"
	>
	<strong>Element</strong>
	</div>

	<div
	id="destination"
	ondrop="onDrop(event);"
	ondragover="onDragOver(event);"
	ondragenter="onDragEnter(event);"
	ondragleave="onDragLeave(event);"
	>
	<strong>Drop Zone</strong>
	</div>
	<footer>
	<p>Courtesy https://front.tips/drag-drop-elements-datatransfer-interface/</p>
	<p>Reference: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer</p>
	</footer>
	</body>
	</html>