本文给大家介绍html5新增属性中的拖拽属性，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
html5新增的许多属性：
o 文件类型声明（1a309583e26acea4f04ca31122d8c535）仅有一型：fef50554eca1a427827adaa329da8122。
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,否则不会有效果
<p draggable =’true’></p>
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
box从右边拖到container中后，box在右边消失，container中添加了被拖拽的box。
右边的box是可排序的。
代码
<body><p class="container"> container</p><p class="boxlist"> <p class="box" draggable="true">box-1</p> <p class="box" draggable="true">box-2</p> <p class="box" draggable="true">box-3</p> <p class="box" draggable="true">box-4</p> <p class="box" draggable="true">box-5</p> <p class="box" draggable="true">box-6</p> <p class="box" draggable="true">box-7</p></p><p class="alert"/></body>
<script> var container = document.getelementsbyclassname('container')[0]; var boxlist = document.getelementsbyclassname('boxlist')[0]; var boxes = document.getelementsbyclassname('box'); var listlength = boxes.length; var targetdropele=null; (function () { for(let i=0;i<listlength;i++){ boxes[i].ondragstart = function (ev) { ev.datatransfer.effectallowed = "move"; ev.datatransfer.setdragimage(ev.target, 0, 0); ev.datatransfer.setdata("text",i+1);// datatransfer.setdata() 方法设置被拖数据的数据类型和值// 数据类型是text，值是可拖动元素的innerhtml targetdropele = ev.target; showalter("ondragstart") } boxes[i].ondragend = function(ev) { /*拖拽结束*/ ev.datatransfer.cleardata("text"); targetdropele = null; showalter("ondragend"); return false }; boxes[i].ondragover = function () { /*拖拽元素进入目标元素上移动*/ showalter("ondragover"); event.preventdefault();// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式; } boxes[i].ondragenter = function (ev) { showalter("ondragenter"); /*拖拽元素进入目标元素*/ } boxes[i].ondrop = function (ev) { /*拖拽元素进入目标元素头上，同时鼠标松开的时候*/ if(targetdropele){ ev.preventdefault();// 调用 preventdefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） showalter("ondrop"); ev.target.parentnode.insertbefore(targetdropele,ev.target); } } } container.ondragover = function () { /*拖拽元素进入目标元素上移动*/ showalter("ondragover"); event.preventdefault();// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式; } container.ondragenter = function (ev) { showalter("ondragenter"); /*拖拽元素进入目标元素*/ ev.target.style.opacity=0.5 } container.ondrop = function (ev) { /*拖拽元素进入目标元素头上，同时鼠标松开的时候*/ if(targetdropele){ ev.preventdefault();// 调用 preventdefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） showalter("ondrop");// let number=ev.datatransfer.getdata("text");// if(number%2==0){// return false;// } targetdropele.parentnode.removechild(targetdropele); container.appendchild(targetdropele); ev.target.style.opacity=1; } } })(); function showalter(content) { settimeout(function () { document.getelementsbyclassname('alert')[0].style.display="none" },1000) document.getelementsbyclassname('alert')[0].innerhtml=content; document.getelementsbyclassname('alert')[0].style.display="block" console.log(content); }</script>
还看到了一些html5的新属性就写在文章末尾吧
<!doctype html><html><head> <meta charset="utf-8"> <title>title</title> <style> .userinfo{ color: red; } .userinfo :hover{ color: transparent; } .userinfo:hover:after{ content: attr(data-hover-response); color: black; } </style></head><body><!--data-***--><!--符合html5的规范--><!--js提供dataset方法--><!--css提供attr()方法--><!--<div userid = "6666" name="hugo"></div>--><div id ="user" data-userid="6666" data-hover-response="see i am changed" data-name="hugo" data-date-of-birthday>fiona</div><!--datalist-->browsers:<input list="browsers"><datalist id="browsers"> <option value="chrome"></option> <option value="firefox"></option> <option value="ie"></option> <option value="opera"></option> <option value="safari"></option></datalist><!--download属性：表明资源是让用户下载的而不是立即显示的。download的值就是文件名--><div style="margin-top: 20px"> <a href="1-160f6160t7.jpg" download="kitty.jpg"> download with download </a> <a href="1-160f6160t7.jpg" style="margin-left: 20px"> download without download </a></div><!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地--><!--autofocus 页面加载时自动获得焦点，仅对于input, button, textarea等表单元素有效，多个autofocus存在时候，作用与第一个--><div style="margin-top: 20px"> <input> <button autofocus="autofocus">click me</button> <textarea autofocus="autofocus"></textarea> <input autofocus="autofocus"></div><!--placeholder--><div style="margin-top: 20px"><input placeholder="use rname"></div><!--menu目前chrome safari不支持--><div> <menu type="context" id="mymenu"> <menuitem label="fresh post"></menuitem> <menuitem label="skip to moment"></menuitem> <menuitem label="share to..."> <menuitem label="facebook"></menuitem> <menuitem label="twitter"></menuitem> </menuitem> </menu></div></body><script> var user = document.getelementbyid("user"); //驼峰的写法 user.dataset.dateofbirthday = "1992-04-04" user.dataset.englishname = "fiona"// <!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地-->var blob = new blob(["hello world i am content "]);//文本内容 var a = document.createelement("a"); a.href = window.url.createobjecturl(blob); a.download = "hello world.txt"; a.textcontent = "download hello world" document.body.appendchild(a)</script></html>
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问html5视频教程！
相关推荐：
php公益培训视频教程
html5图文教程
html5在线手册
html5特效代码大全
以上就是html5新增属性之拖拽属性（介绍）的详细内容。