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。
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新增属性之拖拽属性（引见）的细致内容，更多请关注ki4网别的相干文章！
