在鼠标按下时拖动元素的内部 html 并将其放到另一个元素中

Question

我有一个网格，其中有一个start node. 我怎样才能使它成为一个可拖动的对象。 我不想移动 HTML 元素本身，因为它包含有关该节点的信息（位置、状态等）。 我只想将它的inner html移动到另一个 HTML 元素，这样 HTML 元素信息（例如x和y坐标）就不会移动。

这就是我想要实现的目标：

我怎样才能达到这种效果？

我有以下事件处理功能：

const events = () => {
  for (let i = 0; i < 16; i++) {
    for (let j = 0; j < 45; j++) {
      const node = board[i][j];
      node.DOMElement.addEventListener("click", function () {
          // Click events ocurr here for a Node in a specific x and y position in the board
      });
    }
  }
};

Answer 1

下面的诀窍！ 刚刚添加/删除了鼠标进入或离开瓷砖时我需要的东西。

let mouseDown: boolean = false;
let startNodeSelected: boolean = false;
let targetNodeSelected: boolean = false;

document.addEventListener("mousedown", () => {
  mouseDown = true;
});

document.addEventListener("mouseup", () => {
  mouseDown = false;
});

export const events = () => {
  for (let i = 0; i < 16; i++) {
    for (let j = 0; j < 45; j++) {
      const node: Node = board[i][j];
      const nodeElement: HTMLElement = board[i][j].DOMElement;

      nodeElement.addEventListener("mouseleave", () => {
        removeStartNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseenter", () => {
        addStartNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseleave", () => {
        removeTargetNodeOnDrag(node, nodeElement);
      });

      nodeElement.addEventListener("mouseenter", () => {
        addTargetNodeOnDrag(node, nodeElement);
      });
    }
  }
};

const removeStartNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "start" && mouseDown) {
    nodeElement.classList.remove("start");
    node.type = "empty";
    node.state = "unvisited";
    startNodeSelected = true;
  }
};

const addStartNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "empty" && mouseDown && startNodeSelected) {
    nodeElement.classList.add("start");
    node.type = "start";
    node.state = "visited";
    startNodeSelected = false;
  }
};

const removeTargetNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "target" && mouseDown) {
    nodeElement.classList.remove("target");
    node.type = "empty";
    targetNodeSelected = true;
  }
};

const addTargetNodeOnDrag = (node: Node, nodeElement: HTMLElement) => {
  if (node.type === "empty" && mouseDown && targetNodeSelected) {
    nodeElement.classList.add("target");
    node.type = "target";
    targetNodeSelected = false;
  }
};