HTML5拖放实例分析
本文小编为大家详细介绍“HTML5拖放实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5拖放实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
HTML5拖放（Drag和Drop）
拖放（Drag和drop）是HTML5标准的组成部分。
将RUNOOB.COM图标拖动到矩形框中。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在HTML5中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
InternetExplorer9+,Firefox,Opera,Chrome,和Safari支持拖动。
注意:Safari5.1.2不支持拖动.
HTML5拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" class="lazy" data-src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
读到这里，这篇“HTML5拖放实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
