前端HTML5写一个拖拽到目标元素效果的代码
时间: 2023-04-05 09:03:08 浏览: 70
你好,以下是前端HTML5写一个拖拽到目标元素效果的代码:
HTML代码:
```
<div id="drag" draggable="true">拖拽我</div>
<div id="target">目标元素</div>
```
CSS代码:
```
#drag {
width: 100px;
height: 100px;
background-color: #ccc;
cursor: move;
}
#target {
width: 200px;
height: 200px;
background-color: #eee;
}
```
JavaScript代码:
```
var drag = document.getElementById("drag");
var target = document.getElementById("target");
drag.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
target.addEventListener("dragover", function(event) {
event.preventDefault();
});
target.addEventListener("drop", function(event) {
var data = event.dataTransfer.getData("text/plain");
var element = document.getElementById(data);
event.target.appendChild(element);
});
```
以上是前端HTML5写一个拖拽到目标元素效果的代码,希望对你有帮助。