html js 实现拖拽功能
时间: 2023-12-30 12:46:50 浏览: 45
HTML和JavaScript可以实现拖拽功能。以下是一个简单的示例:
HTML代码:
```
<div id="drag" draggable="true">Drag me!</div>
<div id="drop">Drop here!</div>
```
JavaScript代码:
```
var drag = document.getElementById("drag");
var drop = document.getElementById("drop");
drag.ondragstart = function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
drop.ondragover = function(event) {
event.preventDefault();
}
drop.ondrop = function(event) {
var id = event.dataTransfer.getData("text");
var element = document.getElementById(id);
drop.appendChild(element);
event.preventDefault();
}
```
这个示例中,我们使用了HTML5的拖拽API。首先,在`<div>`标签中添加了`draggable="true"`属性,表示该元素可以被拖拽。然后,我们在JavaScript中定义了三个事件处理函数:
- `ondragstart`:当开始拖拽元素时触发,我们在这个事件中设置了数据传输的类型和数据。在这个例子中,我们将被拖拽元素的id作为数据传输的内容。
- `ondragover`:当拖动元素经过目标元素时触发,我们在这个事件中阻止了默认的行为,即不允许在目标元素上放置拖拽元素。
- `ondrop`:当拖拽元素放置在目标元素上时触发,我们在这个事件中获取了拖拽元素的id,然后将该元素添加到目标元素中,并阻止了默认的行为。
这样就实现了一个简单的拖拽功能。