amatiasq/html5-dnd.html

## html5-dnd.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="left">Left</div>
      <div class="divider" draggable></div>
      <div class="right">Right</div>
    </div>

    <style>
      body {
        margin: 0;
        font-family: sans-serif;
      }

      #app {
        width: 100%;
        height: 100svh;
        display: flex;
        align-items: stretch;
        justify-items: stretch;
        box-sizing: border-box;
        border: 3px solid greenyellow;
      }

      .left,
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .divider {
        flex-basis: 20px;
        background-color: red;
      }

      .divider.is-dragging {
        background-color: blue;
      }

      .divider.is-clicked {
        box-sizing: border-box;
        border: 2px solid black;
      }
    </style>

    <script>
      const divider = document.querySelector(".divider");

      divider.addEventListener("mousedown", () => {
        // console.log("mousedown");
        divider.classList.add("is-clicked");
      });

      document.body.addEventListener("mouseup", () => {
        // console.log("mouseup");
        divider.classList.remove("is-clicked");
      });

      divider.addEventListener("dragstart", () => {
        console.log("drag start");
        divider.classList.add("is-dragging");
      });

      divider.addEventListener("dragend", () => {
        console.log("drag end");
        divider.classList.remove("is-dragging");
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<div id="app">
	<div class="left">Left</div>
	<div class="divider" draggable></div>
	<div class="right">Right</div>
	</div>

	<style>
	body {
	margin: 0;
	font-family: sans-serif;
	}

	#app {
	width: 100%;
	height: 100svh;
	display: flex;
	align-items: stretch;
	justify-items: stretch;
	box-sizing: border-box;
	border: 3px solid greenyellow;
	}

	.left,
	.right {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.divider {
	flex-basis: 20px;
	background-color: red;
	}

	.divider.is-dragging {
	background-color: blue;
	}

	.divider.is-clicked {
	box-sizing: border-box;
	border: 2px solid black;
	}
	</style>

	<script>
	const divider = document.querySelector(".divider");

	divider.addEventListener("mousedown", () => {
	// console.log("mousedown");
	divider.classList.add("is-clicked");
	});

	document.body.addEventListener("mouseup", () => {
	// console.log("mouseup");
	divider.classList.remove("is-clicked");
	});

	divider.addEventListener("dragstart", () => {
	console.log("drag start");
	divider.classList.add("is-dragging");
	});

	divider.addEventListener("dragend", () => {
	console.log("drag end");
	divider.classList.remove("is-dragging");
	});
	</script>
	</body>
	</html>