HTML5拖放实例分析
本文小编为大家详细介绍“HTML5拖放实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5拖放实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
创新互联建站为企业提供:品牌网站建设、网络营销策划、小程序定制开发、营销型网站建设和网站运营托管,一站式网络营销整体服务。实现不断获取潜在客户之核心目标,建立了企业专属的“营销型网站建设”,就用不着再为了获取潜在客户而苦恼,相反,客户会主动找您,生意就找上门来了!
HTML5拖放(Drag和Drop)
拖放(Drag和drop)是HTML5标准的组成部分。
将RUNOOB.COM图标拖动到矩形框中。
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在HTML5中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
InternetExplorer9+,Firefox,Opera,Chrome,和Safari支持拖动。
注意:Safari5.1.2不支持拖动.
HTML5拖放实例
下面的例子是一个简单的拖放实例:
实例
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
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));
}
拖动 RUNOOB.COM 图片到矩形框中:
读到这里,这篇“HTML5拖放实例分析”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。
文章名称:HTML5拖放实例分析
网站URL:http://ybzwz.com/article/ghichs.html