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

Question

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

这就是我想要实现的：

How can I achieve that effect?

我有以下事件处理函数：

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

以下成功了！只是 added/removed 当鼠标进入或离开图块时我需要的东西。

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

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

Drag the inner html of an element and drop it in another element while mouse is down

javascript

dom-events

typescript