拖拽事件
源对象
需要被拖动的对象
- ondragstart事件----------用户开始拖动元素时触发
- ondrag事件----------元素正在拖动时触发
- ondragend事件----------用户完成元素拖动后触发
将需要拖拽的源对象的dragable属性设为true
<p draggable="true">拖动我</p>
目标对象
源对象进入的对象(容器)
- ondragenter事件----------当源对象进入其容器范围内时触发
- ondragover事件----------当源对象在容器范围内时触发
- ondragleave事件----------当源对象离开容器时触发
- ondrop事件----------当被源对象被拖入容器内且释放鼠标时触发
给目标对象绑定ondragover事件函数,禁用其默认事件行为
<div ondragover="allowDrag()"></div>
<script type="text/javascript">
function allowDrag(){
event.preventDefault();
}
</script>
示例:使“目标文本”变为可拖动状态,让其可以在两个容器之间来回拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
border: 2px solid black;
margin-top: 30px;
display: flex;
align-items: center;
}
#box2{
width: 300px;
height: 300px;
border: 2px solid black;
margin-top: 30px;
display: flex;
align-items: center;
}
#text{
margin: 0 auto;
font-size: 30px;
}
</style>
</head>
<body>
<div id="box1" ondragover="allowDrag()" ondrop="place()">
<p id="text" draggable="true">目标文本</p>
</div>
<div id="box2" ondragover="allowDrag()" ondrop="place()"></div>
</body>
<script type="text/javascript">
function allowDrag(){
event.preventDefault();
}
function place(){
var p=document.getElementById("text");
var box=event.target;
box.appendChild(p);
}
</script>
</html>
拖动前
拖动后