css拖动改变div位置代码
时间: 2023-06-06 20:06:20 浏览: 66
以下是实现 CSS 拖动改变 div 位置的代码示例:
HTML 代码:
```
<div class="drag">
<p>拖动我改变位置</p>
</div>
```
CSS 代码:
```
.drag {
position: absolute;
top: 50px;
left: 50px;
background-color: #F2F2F2;
width: 200px;
height: 100px;
cursor: move;
}
.drag p {
text-align: center;
padding-top: 40px;
}
```
JavaScript 代码:
```
let dragElement = document.querySelector('.drag');
let dragging = false;
let dragStartX;
let dragStartY;
dragElement.addEventListener('mousedown', function(event) {
dragging = true;
dragStartX = event.clientX - dragElement.offsetLeft;
dragStartY = event.clientY - dragElement.offsetTop;
});
window.addEventListener('mousemove', function(event) {
if (dragging) {
dragElement.style.left = (event.clientX - dragStartX) + 'px';
dragElement.style.top = (event.clientY - dragStartY) + 'px';
}
});
window.addEventListener('mouseup', function(event) {
dragging = false;
});
```
注意:以上代码仅供参考,具体实现方式可以根据实际需求进行调整。