动态阻力；删除Javascript

我对javascript相当陌生。我正在尝试创建一个平台，通过拖放底部栏（navbarYuivae）中的项目，我可以在其中创建无限数量的板。每个新板也必须在平台内可移动。 在这个codepen的例子中，你已经有了一块可以移动的板，但是当你从“底部栏”拖动一块新板时，新创建的板是不可移动的。它们都具有相同的div结构和类名。 我不明白为什么新的董事会不能移动

如果你能理解我的错误，请告诉我

链接到代码笔：

HTML

JS

//添加新板
const-baritems=document.queryselectoral（“.baritem”）；
const workBoard=document.querySelector（“.workBoard”）；
设draggedItem=null；
for（设i=0；i

无法根据您发布的内容创建新板。我认为您的dragstart侦听器没有正确构建板的html结构。任何新板上也没有事件侦听器，因此无法拖动它们。创建事件侦听器后，必须附加它。所以您需要像newBContainer.addEventListener（'mousedown'，mousedown'）这样的东西；但是您需要将mousedown事件移动到另一个范围。您好，谢谢您的回答。事件侦听器是board.addEventListener（“mousedown”，mousedown）；它应该位于类为“board container”的所有对象上。因此，我假设新添加的元素将被选择，因为它们具有相同的类。我需要将mousedown事件移动到另一个范围是什么意思？

<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>

//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);
    }
  }
}