drag and drop

save drag and drop position in local storage

by pekja

HTML

<div class="home-content">
  <div class="overview-boxes">
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="box_topic">fruit</div>
        <div class="todo" draggable="true">
          apple<br>
          mango<br>
          grape<br>
          banana<br>
          papaya<br>
        </div>
      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="box_topic">flower</div>
        <div class="todo" draggable="true">
          rose<br>
          jasmine<br>
          sunflower<br>
          tulips<br>
          daisy<br>
        </div>
      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="box_topic">animal</div>
        <div class="todo" draggable="true">
          monkey<br>
          cat<br>
          bird<br>
          fish<br>
          tiger<br>
        </div>
      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="box_topic">color</div>
        <div class="todo" draggable="true">
          pink<br>
          purple<br>
          blue<br>
          yellow<br>
          green<br>
        </div>
      </div>
    </div>
  </div>

CSS

.home-content .overview-boxes {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding: 0 30px;
  margin-bottom: 20px;
}

.home-content .overview-boxes .box {
  width: calc(100% / 4 - 15px);
  display: fixed;
  justify-content: center;
  padding: 15px 14px;
  background: #d8d8dfaf;
  border-radius: 8px;
  height: 300px;
  overflow: auto;
}

.home-content .overview-boxes .box_topic {
  font-size: 20px;
  font-weight: 500;
  margin-left: 15px;
  margin-bottom: 20px;
}

.todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: #f7f7f7ab;
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1)0px 0px 0px 4px;
  border-radius: 12px;
  padding: 0.7rem 2rem;
  font-size: 14px;
  margin: 10px 10px;
  cursor: pointer;
  text-align: left;
}

JavaScript

const todos = document.querySelectorAll(".todo");
const all_status = document.querySelectorAll(".box")

// admin page drag and drop
todos.forEach((todo) => {
  todo.addEventListener("dragstart", dragStart);
  todo.addEventListener("dragend", dragEnd);
});

function dragStart() {
  draggableTodo = this;
  setTimeout(() => {
    this.style.display = "none";

  }, 0);
  console.log("dragStart");
}

function dragEnd() {
  draggableTodo = null;
  setTimeout(() => {
    this.style.display = "block";

  }, 0);
  console.log("dragEnd");
}

all_status.forEach((box) => {
  box.addEventListener("dragover", dragOver);
  box.addEventListener("dragenter", dragEnter);
  box.addEventListener("draleave", dragLeave);
  box.addEventListener("drop", dragDrop);
});

function dragOver(e) {
  e.preventDefault();
  //console.log("dragOver");
}

function dragEnter() {
  console.log("dragEnter");
}

function dragLeave() {
  console.log("dragLeave");
}

function dragDrop() {
  this.appendChild(draggableTodo);
  var left = this.offsetLeft;
  var top = this.offsetTop;
  localStorage.setItem("left", left);
  localStorage.setItem("top", top);
  console.log("dropped");
}