拖放是htm5标准的一部分，它是一种常见的特性，即抓取对象以后可以拖到另一个位置
一.设置元素为可拖放
把 draggable属性设置为true
二.关于拖放的三种事件
1.ondrop：当放置被拖数据时会发生的事情
2.ondragstart:规定当元素被拖动时，会发生什么
3.ondragover:规定在何处放置被拖动的数据
这里要注意：默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这里要通过调用ondragover事件的event.preventDefault()方法
event.preventDefault();
下面是小练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖放元素</title>
<style type="text/css">
#box{
width: 300px;
height: 200px;
display:flex;
justify-content: center;
align-items: center;
border:solid #ddd 1px;
}
#img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<img id="img" src="../img/pic.png" alt="" draggable="true" ondragstart="drag(event)"/>
<script type="text/javascript">
function allowDrag(ev){
ev.preventDefault();
}//设置元素为允许放置
function drag(ev){
ev.dataTransfer.setData('text',ev.target.id);
}
function drop(ev){
ev.preventDefault();
let data=ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
网友评论