本文小编为大家详细介绍“HTML5拖放实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“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" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
读到这里，这篇“HTML5拖放实例分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网JavaScript频道。
--结束END--
本文标题: HTML5拖放实例分析
本文链接: https://www.lsjlt.com/news/96279.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0