HTML5新增属性之拖拽属性（介绍）-
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
代码
container
box-1
box-2
box-3
box-4
box-5
box-6
box-7
《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还看到了一些html5的新属性就写在文章末尾吧
Title
Fiona
browsers:
download with download
download without download
《script》
var user = document.getElementById("user");
//驼峰的写法
user.dataset.dateOfBirthday = "1992-04-04"
user.dataset.englishName = "Fiona"
//
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》
总结：以上就是本篇文的全部内容，但愿能对大家的学习有所帮忙。更多相干教程请拜访Html5视频教程！
