HTML5 새 속성 드래그 속성(소개)-H5 튜토리얼-php.cn

Demo

집

웹 프론트엔드

H5 튜토리얼

HTML5 새 속성 드래그 속성(소개)

青灯夜游

Oct 11, 2018 pm 04:21 PM

html5

이 글에서는 HTML5의 새로운 속성 중 드래그 앤 드롭 속성에 대해 소개하겠습니다. 참고할 만한 가치가 있는 친구들이 참고하시면 좋겠습니다.

HTML5에 추가된 많은 새로운 속성:

o FileClassType 선언()Only 에는 한 가지 유형만 있습니다. .

o 새로운 구문 분석 순차 순서: 더 이상 SGML을 기반으로 하지 않습니다.

새 요소: section, video, 진행률,nav, 미터, 시간, 따로, 캔버스, 명령, 데이터 목록, 세부 정보, 포함, figcaption,그림, 바닥글, 머리글, hgroup, keygen, 표시, 출력, rp, rt, 루비, 소스, 요약, wbr.

InputNew classtype: date, email, urletc.

새 속성: ping(a 및 area용) , charset(meta용) ), 비동기 ( script용).

전역 속성: id, tabindex,peat.

새로운 전역 속성: contenteditable, contextmenu, draggable, dropzone, hide, 맞춤법 검사.

요소 제거: acronym, applet,basefont, big, center, dir, 글꼴, 프레임, 프레임셋, isindex, noframes, Strike,tt. 이제 HTML5의 새로운 속성 중 드래그 앤 드롭 속성을 소개하겠습니다. ㅋㅋㅋ Event.dataTransfer

Draggable 속성 : Gu이름 의미meaning, 드래그한 요소는 draggable=true로 설정해야 합니다. 그렇지 않으면 효과가 없습니다

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

로그인 후 복사

DataTransfer 속성 및 class 종류 ㅋㅋㅋ

String파일

filelist

mozSourceNode 유형 DOMStringList

모스 커서

스트링

mozItemCount

서명되지 않은 긴

Node

ondragstart 이벤트: 드래그 요소가 드래그되기 시작하면 이벤트가 트리거되고 이 이벤트는 드래그된 요소에 대해 작동합니다 . 온드라젠터

이벤트: 드래그 요소 가 viewmarker에 들어갈 때 요소가 트리거될 때 이벤트, 이 이벤트는 요소의 대상에 작용합니다. 온드래그오버 이벤트: 드래그 요소

가 eyemarker 요소 를 통과할 때 를 터치했을 때 의 이벤트, 이 이벤트는 대상 요소에 작용합니다. ondrop이벤트: 드래그 요소

가 동시에 대상 요소에서 마우스를 놓을 때 트리거되면 이 이벤트는 대상 요소에 작용합니다

ondragend 이벤트: 드래그가 완료되면

가 트리거됩니다. 이벤트는 드래그된 요소에 대해 작동합니다. Event.preventDefault() 메소드 : 실행 방지 기본 이벤트 방법 등 PreventDefault는 ondrop에서 실행되어야 합니다. 그렇지 않으면 ondrop 이벤트가 트리거되지 않습니다. 또한, 다른 애플리케이션이나 파일, 특히 사진에서 무언가를 드래그하는 경우 기본 동작은 사진이나 관련 정보를 표시하는 것이며 실제로 드롭을 실행하지는 않습니다. 이때 문서의 ondragover 이벤트를 사용하여

Event. effectAllowed 속성: 드래그 효과, 값

가져오기:

None, copy, copyLink, copyMove, link, linkMove , move, all, 초기화되지 않음(기본값) value

meaning

이 항목은 다음과 같습니다. 삭제 허용소스 프로젝트의 복사본이 새 위치에 나타날 수 있습니다복사 또는 링크 작업 허용복사 또는 이동 작업 허용

None
copy
copyLink
복사이동
link	可以在新的地方建立与源的链接
linkMove	允许link或者move操作
move	一个项目可能被移动到新的位置
All	允许所有操作

事件触发顺序

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

Demo

HTML5 새 속성 드래그 속성(소개)

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

右边的box是可排序的。

HTML5 새 속성 드래그 속성(소개)

代码

<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(&#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>

로그인 후 복사

还看到了一些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视频教程！