HTML5新增属性之拖拽属性（介绍）

本文给大家介绍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

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

右边的box是可排序的。

代码

     container
    
box-1
    
box-2
    
box-3
    
box-4
    
box-5
    
box-6
    
box-7

登录后复制

    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);    }

登录后复制

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

nbsp;html>                    .userInfo{            color: red;        }        .userInfo :hover{            color: transparent;        }        .userInfo:hover:after{            content: attr(data-hover-response);            color: black;        }    <!--
-->
Fiona
browsers:                    
     download with download      download without download 
        click me        
                                                                
    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)

登录后复制

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！

相关推荐：

php公益培训视频教程

HTML5图文教程

HTML5在线手册

html5特效代码大全

以上就是HTML5新增属性之拖拽属性（介绍）的详细内容，更多请关注【创想鸟】其它相关文章！