【HTML5】拖放详解及实现案例

文章目录

- 效果预览
- 代码实现

效果预览

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一颗不甘坠落的流星</title><style>#div1,#div2 {float: left;width: 100px;height: 27px;margin: 10px;padding: 24px 0;text-align: center;border: 1px solid #aaaaaa;}span {display: inline-block;width: 50px;height: 25px;background-color: greenyellow;}</style></head><body><!-- 4. ondragover 事件规定被拖动的数据能够被放置到何处。 --><!-- 6. 当放开被拖数据时，会发生 drop 事件。 --><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><!-- 1. 为了把一个元素设置为可拖放，请把 draggable 属性设置为 true --><!-- 2. ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。 --><span draggable="true" ondragstart="drag(event)" id="drag1"></span></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body><script type="text/javascript">function allowDrop(ev) {// 5. 默认地，数据/元素无法被放置到其他元素中。// 为了实现拖放，我们必须阻止元素的这种默认的处理方式。// 由 ondragover 事件的 event.preventDefault() 方法完成ev.preventDefault();}function drag(ev) {// 3. dataTransfer.setData() 方法设置被拖动数据的数据类型和值// 在本例中，数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")。ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {// 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）ev.preventDefault();通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据var data = ev.dataTransfer.getData("Text");// 被拖数据是被拖元素的 id ("drag1")var span = document.getElementById(data)// 把被拖元素追加到放置元素中ev.target.appendChild(span);}</script>
</html>