以下是一个简单的示例，实现了节点的移动、
添加和删除功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style>
#container {
width: 500
px;
height: 300
px;
border: 1
px solid #ccc;
position: relative;
}
.node {
width: 50
px;
height: 50
px;
border: 1
px solid #ccc;
background-color: #f5f5f5;
position: absolute;
cursor: move;
text-align: center;
line-height: 50
px;
}
#add-node {
margin-top: 20
px;
}
</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 = '0
px';
newNode.style.top = '0
px';
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` 样式。当点击
添加节点按钮时，创建一个新的节点，
添加到容器中，并重新获取节点列表。当双击节点时，删除该节点，并重新获取节点列表。
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
