大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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属性和类型

dropEffect

String


effectAllowed

String

files

FileList

mozCursor

String

mozItemCount

Unsigned long

mozSourceNode

Node

mozUserCancelled

Boolean

types

DOMStringList

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)

含义

None

该项目不允许被drop

copy

源项目的复制项可能会出现在新的位置

copyLink

允许copy或者link操作

copyMove

允许copy或者move操作

link

可以在新的地方建立与源的链接

linkMove

允许link或者move操作

move

一个项目可能被移动到新的位置

All

允许所有操作

事件触发顺序

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

Demo

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

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

右边的box是可排序的。

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

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

代码



     container

    box-1

    box-2

    box-3

    box-4

    box-5

    box-6

    box-7

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




    
    Title
    








Fiona
browsers:                               download with download       download without download 
         click me          
                                                                       

感谢你的阅读,希望你对“HTML5新增属性之拖拽属性的示例”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注创新互联行业资讯频道!


网页标题:HTML5新增属性之拖拽属性的示例
当前链接:http://dzwzjz.com/article/jijdcj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP