HTML5 new attribute drag attribute (introduction)-H5 Tutorial-php.cn

Table of Contents

Demo

Home

Web Front-end

H5 Tutorial

HTML5 new attribute drag attribute (introduction)

青灯夜游

Oct 11, 2018 pm 04:21 PM

html5

This article introduces the drag-and-drop attributes among the new attributes of HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Many new attributes added to HTML5:

o FileClassType Statement ()Only has one type: .

o New parsing order : no longer based on SGML .

o New elements: 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 InputNew ClassType: date, email, url, etc.

o New attribute: ping (for awitharea),charset(for meta) , async (for script).

o Global attributes: id, tabindex, repeat.

o New global attributes: contenteditable,contextmenu, draggable, dropzone, hidden, spellcheck.

o Remove elements: acronym, applet,basefont, big, center, dir, font, frame, frameset, isindex, noframes , strike,tt.

Now we will introduce the drag and drop attributes among the new attributes of HTML5.

DataTransferpairIcon: DragpairLike the medium used to transfer , usually is Event.dataTransfer

##Draggable attribute: GuName thinkingDefinition, the dragged element needs Set draggable=true, otherwise there will be no effect

1	`<p draggable =’true’></p>`

Copy after login

DataTransfer attribute and ClassType

##effectAllowed##filesmozCursor

dropEffect	##String
##String
FileList
String
mozItemCount	Unsigned long
mozSourceNode	Node
mozUserCancelled	Boolean
types	DOMStringList

ondragstart Event: When the drag element starts to be dragged

#ondragenterEvent: When dragging the element into the target

Element #ondragoverEvent: When the drag element passes through the

object

, this event acts on the target elementondrop##Event:

When the element is dragged

When triggered when the mouse is released on the target element at the same time, this event acts on the target element

ondragendWhen dragging is completed triggers Method Property: Drag effect, take ValuesNone, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized(default)

##Event :
# event, this event acts on the dragged Drag the element	Event.preventDefault()
: Prevent the execution of the default event method, etc. PreventDefault must be executed in ondrop, otherwise the ondrop event will not be triggered. In addition, if you drag something from other applications or files, especially pictures, the default action is to display the picture or related information, and does not actually execute drop. At this time, you need to use the document's ondragover event instead	Event.effectAllowed
are:
Value Meaning	#########None ###############This project is not allowed to be dropped#####################copy####### ########Copies of the source project may appear in new locations####################copyLink######## #######Allow copy or link operations#####################copyMove###############Allow copy or move operation###
link	可以在新的地方建立与源的链接
linkMove	允许link或者move操作
move	一个项目可能被移动到新的位置
All	允许所有操作

事件触发顺序

ondragstart->ondragenter->ondragover->ondrop->ondragend

Demo

HTML5 new attribute drag attribute (introduction)

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

右边的box是可排序的。

HTML5 new attribute drag attribute (introduction)

代码

<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>

Copy after login

<script>
    var container = document.getElementsByClassName(&#39;container&#39;)[0];
    var boxList = document.getElementsByClassName(&#39;boxList&#39;)[0];
    var boxes =  document.getElementsByClassName(&#39;box&#39;);
    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(&#39;alert&#39;)[0].style.display="none"
        },1000)
        document.getElementsByClassName(&#39;alert&#39;)[0].innerHTML=content;
        document.getElementsByClassName(&#39;alert&#39;)[0].style.display="block"
        console.log(content);
    }
</script>

Copy after login

还看到了一些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>