生成一个html文件在里面用js和按钮实现节点的移动,添加,删除
时间: 2023-06-11 11:07:11 浏览: 44
以下是一个简单的示例,实现了节点的移动、添加和删除功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style>
#container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.node {
width: 50px;
height: 50px;
border: 1px solid #ccc;
background-color: #f5f5f5;
position: absolute;
cursor: move;
text-align: center;
line-height: 50px;
}
#add-node {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="node" id="node1">1</div>
<div class="node" id="node2">2</div>
<div class="node" id="node3">3</div>
</div>
<button id="add-node">添加节点</button>
<script>
// 获取节点
var container = document.getElementById('container');
var nodes = document.getElementsByClassName('node');
// 鼠标按下时记录偏移量
var offsetX, offsetY;
container.addEventListener('mousedown', function(e) {
if (e.target.classList.contains('node')) {
offsetX = e.clientX - e.target.offsetLeft;
offsetY = e.clientY - e.target.offsetTop;
}
});
// 鼠标移动时移动节点
container.addEventListener('mousemove', function(e) {
if (e.target.classList.contains('node')) {
var node = e.target;
node.style.left = e.clientX - offsetX + 'px';
node.style.top = e.clientY - offsetY + 'px';
}
});
// 添加节点
var addNodeBtn = document.getElementById('add-node');
addNodeBtn.addEventListener('click', function() {
var newNode = document.createElement('div');
newNode.classList.add('node');
newNode.innerHTML = nodes.length + 1;
newNode.style.left = '0px';
newNode.style.top = '0px';
container.appendChild(newNode);
nodes = document.getElementsByClassName('node');
});
// 删除节点
container.addEventListener('dblclick', function(e) {
if (e.target.classList.contains('node')) {
container.removeChild(e.target);
nodes = document.getElementsByClassName('node');
}
});
</script>
</body>
</html>
```
在这个示例中,我们首先定义了一个容器 `#container`,里面包含了三个节点 `#node1`、`#node2` 和 `#node3`。我们给每个节点绑定了鼠标按下、鼠标移动和双击事件,实现了节点的移动、添加和删除功能。
具体来说,当鼠标按下时,记录当前节点的偏移量。当鼠标移动时,计算出节点应该移动到的位置,并设置节点的 `left` 和 `top` 样式。当点击添加节点按钮时,创建一个新的节点,添加到容器中,并重新获取节点列表。当双击节点时,删除该节点,并重新获取节点列表。