DnD

by yuzhangoscar

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="example-parent">
      <div class="example-origin">
        <div id="draggable-1" class="example-draggable" draggable="true">
          draggable
        </div>
      </div>

      <div class="example-dropzone">
        <div id="dropzone-1">
          dropzone
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

CSS

.example-parent {
    border: 2px solid #DFA612;
    color: black;
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
}

.example-origin {
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
}

.example-draggable {
    background-color: #4AAE9B;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
}

.example-dropzone {
    background-color: #6DB65B;
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
}

JavaScript

const draggableOne = document.getElementById('draggable-1');
const dropzoneOne = document.getElementById('dropzone-1');

function dragstartHandler(event) {
    console.log('start');
    event.dataTransfer.setData('text/plain', event.target.id);
    event.currentTarget.style.backgroundColor = 'yellow';
}

function dragoverHandler(event) {
    console.log('dragging over');
    event.preventDefault();
}

function dropHandler(event) {
    console.log('dropped');
    const id = event.dataTransfer.getData('text/plain');
    const draggableElement = document.getElementById(id);
    event.target.appendChild(draggableElement);
    event.dataTransfer.clearData();
}

draggableOne.addEventListener('dragstart', dragstartHandler);
dropzoneOne.addEventListener('ondragover', dragoverHandler);
dropzoneOne.addEventListener('ondrop', dropHandler);