HTML5新增属性之拖拽属性的示例

这篇“HTML5新增属性之拖拽属性的示例”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“HTML5新增属性之拖拽属性的示例”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

十载的黄平网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整黄平建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“黄平网站设计”,“黄平网站推广”以来，每个客户项目都认真落实执行。

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。  3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML5新增的许多属性：

o  文件类型声明（）仅有一型：。

o  新的解析顺序：不再基于SGML。

o  新的元素：section, video, progress,nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption,figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source,summary, wbr。

o  input元素的新类型：date,email, url等等。

o  新的属性：ping（用于a与area）,charset（用于meta）, async（用于script）。

o  全域属性：id, tabindex, repeat。

o  新的全域属性：contenteditable,contextmenu, draggable, dropzone, hidden, spellcheck。

o  移除元素：acronym, applet,basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike,tt。

下面我们就可是介绍HTML5新增属性中的拖拽属性吧。

DataTransfer对象：拖拽对象用来传递的媒介，一般为Event.dataTransfer

Draggable属性: 顾名思义，被拖拽的元素需要设置draggable=true,否则不会有效果

DataTransfer属性和类型

ondragstart事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖拽元素上

ondragenter事件：当拖拽元素进入目标元素时候触发的事件，此事件作用在目标元素上

ondragover事件：当拖拽元素穿过目标元素时候触发的事件，此事件作用在目标元素上

ondrop事件：当拖拽元素在目标元素上同时放开鼠标时触发的时候，此事件作用在目标元素上

ondragend事件：当拖拽完成时触发的事件，此事件作用在被拖拽元素上

Event.preventDefault()方法：阻止默认事件方法等的执行。在ondrop中一定要执行preventDefault，否则ondrop事件不会被触发。另外，如果是从其他应用软件或者文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或者是相关信息，并不是真的执行drop。此时需要用document的ondragover事件替代

Event.effectAllowed属性：拖拽效果，取值有：

None，copy，copyLink，copyMove，link，linkMove，move，all，uninitialized(default)

事件触发顺序

ondragstart->ondragenter->ondragover->ondrop->ondragend

Demo

box从右边拖到container中后，box在右边消失，container中添加了被拖拽的box。

右边的box是可排序的。

代码

     container


    box-1

    box-2

    box-3

    box-4

    box-5

    box-6

    box-7

还看到了一些html5的新属性就写在文章末尾吧

    
    
    








Fiona