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="todo" id="drag" draggable="true" ondblclick="document.getElementById('doubleClick-1').style.display='block'">
          <ul class="b" id="draged">
            <li>one</li>
            <li>two</li>
            <li>three</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="todo" id="drag" draggable="true">
          <ul class="b" id="draged">
            <li>one</li>
            <li>two</li>
            <li>three</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="todo" id="drag" draggable="true">
          <ul class="b" id="draged">
            <li>four</li>
            <li>five</li>
            <li>six</li>

          </ul>
        </div>


      </div>
    </div>
    <div class="box" id="myModal">
      <div class="left-side">
        <div class="todo" id="drag" draggable="true">
          <ul class="b" id="draged">
            <li>seven</li>
            <li>eight</li>
            <li>nine</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

CSS

.home-content {
  position: relative;
  padding-top: 50px;
}

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

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

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

.todo,
.todo2 {
  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;
  top: flex;
  left: flex;
}

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("localStorage");
}