拖动元素的内部html，并在鼠标关闭时将其放到另一个元素中。
拖动元素的内部html，并在鼠标关闭时将其放到另一个元素中。
提问于 2020-09-30 21:31:43
我有一个网格，其中有一个start node.，如何使它成为一个可拖动的对象。我不想移动HTML元素本身，因为它包含关于该节点的信息(位置、状态等)。我只想将它的inner html移动到另一个HTML，这样x和y坐标等HTML元素信息就不会移动。
这就是我想要达到的目标：
我怎样才能达到这个效果？
我有以下处理事件的功能：
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
});
}
}
};回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-01 01:38:00
下面这招成功了！刚添加/删除了我需要的东西，当鼠标进入或离开瓷砖。
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;
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64146033
复制相关文章
相似问题
腾讯云开发者
