应用于被拖拽元素的事件
ondrag：整个拖拽过程都会触发
ondragstart：拖拽开始时触发
ondragleave：鼠标离开拖拽目标时触发
ondragend：拖拽结束时触发
应用于目标元素的事件
ondragenter：拖拽元素进入时触发
ondragover：停留在目标元素上时触发
ondrop：在目标上松开鼠标时触发
ondragleave：鼠标离开拖拽目标时触发
演示代码
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<meta charset="utf-8" />
</head>
<style>
div{
height: 400px;
width: 400px;
border: 1px solid black;
float: left;
margin: 30px;
}
p{
width: 100%;
background-color: aqua;
text-align: center;
}
</style>
<body>
<div>
<p id="p1" draggable="true">拖动到另一个框里</p>
</div>
<div></div>
</body>
<script type="text/javascript">
document.ondragstart=function(e){
e.dataTransfer.setData("text/html",e.target.id);
console.log(e.target.id);
}
document.ondrag=function(e){
console.log("drag");
}
document.ondragend=function(e){
console.log("dragend");
}
document.ondragleave=function(e){
console.log("dragleave");
}
document.ondragover=function(e){
e.preventDefault();
}
document.ondrop=function(e){
var id=e.dataTransfer.getData("text/html"); //只有在ondrop有效
e.target.appendChild(document.getElementById(id));
}
</script>
</html>
4814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
