JavaScript拖动红色div
时间: 2023-06-28 21:07:17 浏览: 54
你可以使用JavaScript来实现拖动红色div的效果。具体实现步骤如下:
1. 使用CSS设置红色div的样式和位置。
```css
#red-div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
```
2. 使用JavaScript获取红色div的元素,并为其添加mousedown、mousemove和mouseup事件。
```javascript
var redDiv = document.getElementById('red-div');
var isDragging = false;
var dragStartX, dragStartY, offsetX, offsetY;
redDiv.addEventListener('mousedown', function(e) {
isDragging = true;
dragStartX = e.clientX;
dragStartY = e.clientY;
offsetX = parseInt(window.getComputedStyle(redDiv).left) || 0;
offsetY = parseInt(window.getComputedStyle(redDiv).top) || 0;
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
var newX = e.clientX - dragStartX + offsetX;
var newY = e.clientY - dragStartY + offsetY;
redDiv.style.left = newX + 'px';
redDiv.style.top = newY + 'px';
}
});
document.addEventListener('mouseup', function(e) {
isDragging = false;
});
```
3. 在页面中添加红色div的HTML代码。
```html
<div id="red-div"></div>
```
这样就可以实现拖动红色div的效果了。