H5 拖效

礼礼。

于 2021-07-04 22:54:10 发布

阅读量56

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_45736311/article/details/118468935

版权

H5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用HTML5的拖放API来创建一个简单的拖放功能。通过设置<img>元素的draggable属性为true，定义ondragstart、ondragover和ondrop事件处理函数，可以实现在页面上拖放图片并将其放置到指定的<div>元素中。关键步骤包括阻止默认的拖放行为、设置拖动数据以及在目标元素中追加拖放的元素。

摘要由CSDN通过智能技术生成

把元素设置为拖放：<img draggable="true">
规定拖动什么数据：ondragstart 属性调用了一个drag(event) 函数
设置被拖动数据的数据类型和值：dataTransfer.setData()
阻止默认的处理方式：event.preventDefault()
获得被拖的数据：dataTransfer.getData()
拖放前

拖放后

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖动数据的数据类型和值
//数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")
}

function drop(ev)
{
//默认地，数据/元素无法被放置到其他元素中,所必须阻止这种默认方式
ev.preventDefault();
//通过 dataTransfer.getData() 方法获得被拖的数据
var data=ev.dataTransfer.getData("Text");
//把被拖元素追加到放置元素中
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!--把元素设置为拖放：<img draggable="true"> -->
<!--规定拖动什么数据：drag(event) -->
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>