html5의 드래그 앤 드롭 샘플 코드에 대한 자세한 소개-H5 튜토리얼-php.cn

html5의 드래그 앤 드롭 샘플 코드에 대한 자세한 소개

黄舟

풀어 주다： 2017-03-15 15:42:47

원래의

1511명이 탐색했습니다.

1) 소스 프로젝트 생성

1.1) draggable 속성 값:

true — — 이 요소는 드래그할 수 있습니다.

false — 이 요소는 드래그할 수 없습니다.

브라우저는 요소를 독립적으로 결정할 수 있습니다.

1.2) 드래그된 요소의 이벤트:

드래그 시작 — — 요소가

드래그 — 요소를 드래그할 때 반복적으로 트리거됩니다.

드래그

end——트리거됨 드래그 작업이 완료되면

2) 릴리스 영역 생성

2.1) 릴리스 영역 이벤트:

dragenter - 드래그된 요소가 릴리스 영역이 차지하는 화면 공간에 들어갈 때 트리거됩니다.

dragover - 드래그된 요소가 릴리스 영역이 차지하는 화면 공간에 들어갈 때 트리거됩니다. 릴리스 영역 내에서 이동할 때 트리거됩니다.

드래그한 요소가 배치되지 않고 릴리스 영역을 벗어날 때 트리거됩니다. 드래그한 요소가 릴리스 영역에 놓였을 때

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
            var msg = document.getElementById("msg");
          
            var draggedID;
          
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var newElem = document.getElementById(draggedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                draggedID = e.target.id;
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>

로그인 후 복사

3) DataTransfer

객체 사용

3.1) 드래그 앤 드롭 동작에 의해 발생된 이벤트와 동시에 전달되는 객체는 MouseEvent에서 파생된 DragEvent입니다.

DragEvent 객체에 의해 정의된 추가 속성:

dataTransfer - 데이터를 릴리스 영역(DataTransfer)으로 전송하는 데 사용되는 객체를 반환합니다. 🎜 >

3.2)

DataTransfer 객체에 의해 정의된 속성:

유형 - 반환된 데이터의 형식 getData() ——지정된 형식의 데이터를 반환합니다.

set

Data( ,

clearData()——지정된 형식의 데이터를 제거합니다. format;

files - 드래그된 파일 목록을 반환합니다.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {border: thin solid black; margin:4px;}
            #target { height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            img.dragged {background-color: lightgrey;}
        </style>
    </head>
    <body>
        <p id="src">
            <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
            <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
            <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
            <p id="target">
                <p id="msg">Drop Here</p>
            </p>            
        </p>            
    
        <script>
            var src = document.getElementById("src");
            var target = document.getElementById("target");
                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                var droppedID = e.dataTransfer.getData("Text");               
                var newElem = document.getElementById(droppedID).cloneNode(false);
                target.innerHTML = "";
                target.appendChild(newElem);
                e.preventDefault();
            }
          
            src.ondragstart = function(e) {
                e.dataTransfer.setData("Text", e.target.id);
                e.target.classList.add("dragged");
            }
            
            src.ondragend = function(e) {
                var elems = document.querySelectorAll(".dragged");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("dragged");
                }
            }          
        </script>
    </body>
</html>

로그인 후 복사

3.3) 파일 끌어서 놓기:

파일 개체

에 의해 정의된 속성 - 파일 이름을 가져옵니다. >

유형 - MIME 유형으로 표시되는 파일 유형을 가져옵니다.

크기 - 파일 크기(바이트)를 가져옵니다. >

아아아아

위 내용은 html5의 드래그 앤 드롭 샘플 코드에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!