html5新增属性与技术总结

简单介绍

HTML5 的拖放将会把与用户交互带向别一个等级,并将会对你如何设计用户交互产生重大影响。现今,Firefox 3.5+ 已经对此特性提供了最大 化的支持,其他浏览还只是保守地支持了一小部分(Opera 完全不支持)。不幸的是根据现阶段浏览器提供商的执行状况,你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

  1. 图片和超链接默认是可拖放的。对于所有的元素,HTML5 引进了一个新的属性”draggable”,这将用来设置元素是否接受拖放;
  2. 下列事件对应 HTML5 的拖放:dragstart, drag, dragenter, dragover, dragleave, dropdragend 。当你要fire 掉事件的时候,将需要写 function (事件处理器) 来处理你需要的,也可能需要给元素绑定事件或做事件指派来简化你的代码;
  3. 拖放事件还让你可以通过被拖放元素来传递数据,使用事件属性”dataTransfer” 的 getData 和 setData 方法。
  4. 你可以在不同的浏览器或程序中进行拖放。

相关资料

  1. HTML5 自带拖放 jQuery 插件

演示

HTML5 Drag & Drop Demo