Kanban

by Jason Park

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Kanban</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  </head>
  
  <body>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; height: 100%">
    
      <div style="border: solid 2px black;">
        <div id="card1" draggable="true" style="background-color: red;">
          <div style="background-color:gainsboro; padding: 8px">
            Title
          </div>
        </div>
      </div>
      
      <div style="border: solid 2px black;" class="column-2">
        <div style="padding: 8px">
          Title
        </div>
        <div style="background-color: silver; padding: 8px">
          + Add Card
        </div>
      </div>
      
    </div>
  </body>
</html>

CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

JavaScript

window.addEventListener('DOMContentLoaded', () => {
	console.log('--- DOMContentLoaded ---');

  const element = document.getElementById('card1');

  element.addEventListener("drag", function(event) {

  }, false);
  
  
  element.addEventListener("dragstart", function(event) {
	console.log("--- dragstart ---");
  event.dataTransfer.setData("text/plain", event.target.id);
  event.dataTransfer.dropEffect = "move";
        // store a ref. on the dragged elem
  //       dragged = event.target;
        // make it half transparent
  //       event.target.style.opacity = .5;
  }, false);
  
  document.addEventListener("dragend", function( event ) {
    // reset the transparency
    event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
  	/* console.log("--- dragover ---") */;
    // prevent default to allow drop
    event.preventDefault();
    
    event.dataTransfer.dropEffect = "move";
  }, false);
  
  document.addEventListener("drop", function(event) {
  	console.log("--- drop ---")
  
    // prevent default action (open as link for some elements)
    event.preventDefault();
    
    const data = event.dataTransfer.getData("text/plain");
    event.target.appendChild(document.getElementById(data));
    // move dragged elem to the selected drop target
  //   if ( event.target.className == "dropzone" ) {
  //     event.target.style.background = "";
  //     dragged.parentNode.removeChild( dragged );
  //     event.target.appendChild( dragged );
  //   }

      console.log(event.target.className);
    event.target.style.opacity = 1;

  }, false);
});







//   document.addEventListener("dragenter", function( event ) {
//       // highlight potential drop target when the draggable element enters it
// //       if ( event.target.className == "dropzone" ) {
// //           event.target.style.background = "purple";
// //       }

//   }, false);

//  ...