Dynami c Drag & Drop Javascript - PullRequest
Новая
       15

Dynami c Drag & Drop Javascript

2 голосов
/ 27 апреля 2020

Я довольно новичок в javascript. Я пытаюсь создать платформу, где я могу создавать бесконечное количество досок, перетаскивая элементы в нижней панели (navbarYuivae). Каждая новая доска также должна быть подвижной на платформе. В этом примере codepen у вас будет уже существующая доска, которую вы можете перемещать, но когда вы перетаскиваете новую доску из нижней панели, вновь созданная доска не может быть перемещена. Оба они имеют одинаковую структуру div и имена классов. Я не могу понять, почему новую доску нельзя перемещать.

Пожалуйста, дайте мне знать, если вы можете понять, где моя ошибка.

Ссылка на codepen: https://codepen.io/Yuivae/pen/xxwqpbq

HTML

<div class="navbarYuivae">
   <ul class="workboard-toolbar">
     <a class="baritem" name="board" draggable="true"><i class="fab fa-accusoft"></i></a>
     <a class="baritem" name="text-editor" draggable="true"><i class="fas fa-edit"></i></a>
     <a class="baritem" name="volume-control" draggable="true"><i class="fas fa-volume-down"></i></a>
   </ul>
   <ul class="textedit-toolbar"></ul>
 </div>
 <div class="work-board">
   <div class="board-container" name="board">
     <div class="board">
       <a class="board-icon"><i class="fab fa-accusoft"></i></a>
     </div>
     <input class="board-name" type="text" value="New Board" />
   </div>
 </div>

JS

//Add New Board

const baritems = document.querySelectorAll(".baritem");
const workBoard = document.querySelector(".work-board");

let draggedItem = null;

for (let i = 0; i < baritems.length; i++) {
  const item = baritems[i];

  item.addEventListener("dragstart", function () {
    if (item.name == "board") {
      // CREATE NEWBOARD
      const newBContainer = document.createElement("div");
      const newBoard = document.createElement("div");
      newBContainer.className = "board-container";
      newBoard.className = "board";
      newBoard.name = "board";
      newBContainer.appendChild(newBoard);
      draggedItem = newBContainer;
    }
    console.log("dragstart");
  });

  item.addEventListener("dragend", function (e) {
    if (draggedItem != null) {
      draggedItem.style.left = e.clientX + "px";
      draggedItem.style.top = e.clientY + "px";
      workBoard.appendChild(draggedItem);
      console.log(workBoard, e.clientX, e.clientY);
    }
  });
}

// Move in Panel

const boardContainers = document.querySelectorAll(".board-container");

for (i = 0; i < boardContainers.length; i++) {
  boardContainer = boardContainers[i];
  const board = boardContainer.querySelector(".board");

  board.addEventListener("mousedown", mousedown);
  function mousedown(e) {
    console.log(board);
    window.addEventListener("mousemove", mousemove);
    window.addEventListener("mouseup", mouseup);

    let cursorX = e.clientX;
    let cursorY = e.clientY;

    function mousemove(e) {
      let newX = cursorX - e.clientX;
      let newY = cursorY - e.clientY;

      const rect = boardContainer.getBoundingClientRect();

      boardContainer.style.left = rect.left - newX + "px";
      boardContainer.style.top = rect.top - newY + "px";

      cursorX = e.clientX;
      cursorY = e.clientY;
    }
    function mouseup() {
      window.removeEventListener("mousemove", mousemove);
      window.removeEventListener("mouseup", mouseup);
    }
  }
}
...