HTML5 拖放(Drag 和 Drop)功能开发——基础实战

分享到:

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下。

 

简介


拖拽(Drag/Drop)是个非常普遍的功能。在生活中,拖放物品其实是相当常见的一个动作。标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如《JS实现页面拖放》。。在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。


 

定义

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。


 

浏览器支持

虽然是HTML5的东西,但是,根据findmebyip中显示的浏览器支持情况来看,IE6~IE8都是有drag & drop API的(见下截图)。

Internet Explorer 6~9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。

根据自己的简单的测试,低版本的IE浏览器确实支持诸如ondragstart事件,但是会报不认识dataTransfer的错误。可见IE在细节的处理上与现代浏览器有些不同。


 

HTML5 拖放实例

下面的例子是一个简单的拖放实例:

 

<script type="text/javascript">
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>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://www.baidu.com/img/baidu_jgylogo3.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
昵    称:
验证码:

相关文档:

  • html5 小游戏教学网页
    http://www.17sucai.com/pins/5110.html https://www.udemy.com/free-prep-for-html5-game-development/ http://www.cnblogs.com/Wayou/p/how-to-make-a-simple-...
  • html文档类型
    html文档类型的作用 是用来定义文档中所使用的标签的,也就是给你在文档中所要用到的所有标签先声明父子关系,然后在文档中按照定...
  • Web前端快速编写代码神器HTML/CSS/JavaScript Emment(原名Zen coding)
    Emmet的前身是大名鼎鼎的Zencoding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高...
  • placeholder 属性的支持
    placeholder是HTML5的。 在IE6-8中不能使用。可以使用JQ来设置。 给input一个value,JQ判断得到焦点时value=""; 移开焦点时,若input为空,那么再...
  • [原创]html5游戏_贪吃蛇
    代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两...
  • IE=edge,chrome=1的META信息详解
    这几天在玩HTML5★Boilerplate,注意到meta信息中有这么一句: 复制代码...
  • 一款基于jQuery和HTML5全屏焦点图
    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多...
  • HTML5对视频,音频,拖放的支持
    1)HTML5对视频的支持: 直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如Flash)来显示的。然...
  • HTML中的内容总结
    一、URL编码类型 对于Get方法,参数是直接通过URL传递的,那这个参数又是根据什么进行编码的呢?对于JSP网页,这个编码是通过第一句...
  • 面向国人的HTML5前端末班套件
    总的来说是个不错的模板,总的感官是不错的。为下一个工程积累元素,有兴趣的小伙伴也可以一起学习。 http://amazeui.org/1.x/getting-started...
  • 一个老站长对HTML5认识
    新的一年开始,各个领域都在悄悄发生着一些变化。在移动互联网领域也在发生着很多变化,其中HTML5的技术在多年的实践和国内巨头公...
  • 移动端html页面优化(转)
    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台...
  • html5(六) 地理位置
    http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html http://www.w3school.com.cn/html5/html_5_geolocation.asp...
  • HTML6 展望
    HTML5概述 HTML5是HTML语言最受欢迎的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>,<section>...
  • 支持APP手机应用(android和ios)接口调用 ,传输验证可用 shiro 的 MD5、SHA 等加密
    请认准本正版代码,售后技术有保障,代码有持续更新。(盗版可耻,违者必究)此为本公司团队开发 ------------------------------------------------...
  • The Best Tools for Developers, 2014
    http://theneodesign.com/the-best-tools-for-developers-2014/ Tools,apps,softwarearetheresourcesthatclaimtohelppeoplecompletetheirassignedtaskswithoutan...
  • APP定制 HTML5开发 UNITY3D游戏开发 Mac软件外包
    APP定制HTML5开发UNITY3D游戏开发Mac软件外包 app软件开发带给企业哪些价值? APP现在对于很多人都不在是陌生的词语,而是用户智能时代的...
  • javascript 对象中的 handleEvent
    在高级浏览器中,我们在绑定事件的时候可以知道绑定一个对象,然后在这个对象中的handleEvent方法会自动进入指定的方法,不多说了举...
  • 移动手机平台的HTML5前端优化指南
    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台...
  • HTML5+JS 《五子飞》游戏实现(八)人机对战
    要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样...