HTML5-Drog和Drag

HTML5新增的许多属性：

o文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。

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。

oinput元素的新类型：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

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

右边的box是可排序的。

代码

<body>
<div class="container">container
</div>
<div class="boxList"><div class="box" draggable="true">box-1</div><div class="box" draggable="true">box-2</div><div class="box" draggable="true">box-3</div><div class="box" draggable="true">box-4</div><div class="box" draggable="true">box-5</div><div class="box" draggable="true">box-6</div><div class="box" draggable="true">box-7</div>
</div>
<div 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，值是可拖动元素的innerHTMLtargetDropEle = 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的新属性就写在文章末尾吧

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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 class="userinfo" userid = "6666" name="hugo"></div>--><divclass="userInfo"id ="user"data-userid="6666"data-hover-response="see I am changed"data-name="hugo"data-date-of-birthday>Fiona</div><!--datalist-->browsers:<inputlist="browsers"><datalistid="browsers"><optionvalue="chrome"></option><optionvalue="fireFox"></option><optionvalue="IE"></option><optionvalue="Opera"></option><optionvalue="Safari"></option></datalist><!--download属性：表明资源是让用户下载的而不是立即显示的。download的值就是文件名--><divstyle="margin-top: 20px"><ahref="1-160F6160T7.jpg"download="kitty.jpg">download with download </a><ahref="1-160F6160T7.jpg"style="margin-left: 20px">download without download </a></div><!--下载动态生成的文件，通bob创建二进制文件，然后用这个属性下载到本地--><!--autofocus 页面加载时自动获得焦点，仅对于input, button, textarea等表单元素有效，多个autofocus存在时候，作用与第一个--><divstyle="margin-top: 20px"><input><buttonautofocus="autofocus">click me</button><textareaautofocus="autofocus"></textarea><inputautofocus="autofocus"></div><!--placeholder--><divstyle="margin-top: 20px"><inputplaceholder="use rname"></div><!--menu目前chrome safari不支持--><div><menutype="context"id="mymenu"><menuitemlabel="fresh post"></menuitem><menuitemlabel="skip to moment"></menuitem><menuitemlabel="share to..."><menuitemlabel="facebook"></menuitem><menuitemlabel="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>

慢慢来，不要慌