我有一个网格,其中有一个“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
});
}
}
};
下面的把戏!刚刚添加/删除了鼠标进入或离开图块时需要的东西。
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;
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句