实现宽300px,高300px, 容器内元素height:30px;width:30px; 可拖拽
时间: 2024-02-11 12:07:34 浏览: 34
可以使用 HTML5 的 `draggable` 属性和 JavaScript 来实现拖拽效果。
HTML代码:
```html
<div class="container">
<div class="box" draggable="true"></div>
</div>
```
CSS代码:
```css
.container {
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.box {
width: 30px;
height: 30px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box:active {
cursor: move;
}
```
JavaScript代码:
```javascript
var box = document.querySelector(".box");
var container = document.querySelector(".container");
var isDragging = false;
var boxLeft, boxTop, mouseX, mouseY;
box.addEventListener("dragstart", function(event) {
event.preventDefault();
isDragging = true;
boxLeft = event.clientX - box.offsetLeft;
boxTop = event.clientY - box.offsetTop;
});
container.addEventListener("dragover", function(event) {
event.preventDefault();
mouseX = event.clientX;
mouseY = event.clientY;
});
container.addEventListener("drop", function(event) {
event.preventDefault();
isDragging = false;
});
container.addEventListener("mousemove", function() {
if (isDragging) {
box.style.left = mouseX - boxLeft + "px";
box.style.top = mouseY - boxTop + "px";
}
});
```
解释说明:
1. 使用 `width: 300px` 和 `height: 300px` 设置容器的宽度和高度。
2. 使用 `border: 1px solid #ccc` 设置容器的边框。
3. 使用 `position: relative` 为容器添加相对定位。
4. 使用 `width: 30px` 和 `height: 30px` 设置元素的宽度和高度。
5. 使用 `background-color: #f00` 设置元素的背景颜色为红色。
6. 使用 `position: absolute` 为元素添加绝对定位。
7. 使用 `top: 50%` 和 `left: 50%` 以及 `transform: translate(-50%, -50%)` 将元素居中定位在容器内部。
8. 使用 `draggable="true"` 为元素添加可拖拽属性。
9. 使用 `:active` 伪类为元素添加拖拽效果。
10. 在 JavaScript 中,使用 `event.preventDefault()` 阻止元素默认的拖拽行为。
11. 监听元素的 `dragstart` 事件,在事件处理程序中设置 `isDragging` 为 `true`,并记录鼠标指针与元素左上角之间的距离。
12. 监听容器的 `dragover` 事件,在事件处理程序中阻止默认行为,并记录鼠标指针的位置。
13. 监听容器的 `drop` 事件,在事件处理程序中阻止默认行为,并将 `isDragging` 设置为 `false`。
14. 监听容器的 `mousemove` 事件,在事件处理程序中判断 `isDragging` 是否为 `true`,如果是,则更新元素的位置。
相关推荐
![htm](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)