HTML5 드래그 앤 드롭 학습 및 전체 예제 코드-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 드래그 앤 드롭 학습 및 전체 예제 코드

PHPz

Apr 23, 2017 am 11:55 AM

이번 글에서는 HTML5 드래그 앤 드롭 방법과 예제 코드 완성 방법에 대해 알아보겠습니다. H5 초보자들에게 도움이 되길 바랍니다!

1) 소스 프로젝트 생성

1.1) draggable 속성 값 :

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

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

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

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

dragstart - 요소가 드래그되기 시작할 때 트리거됨 ;

드래그 - 요소를 드래그할 때 반복적으로 실행됩니다.

Dragend - 드래그 작업이 완료되면 트리거됩니다.

2) 릴리스 영역을 만듭니다.

2.1) 릴리스 영역 이벤트:

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

Dragover ——드래그된 요소가 릴리스 영역 내에서 이동할 때 트리거됩니다.

드래그된 요소가 배치되지 않고 릴리스 영역을 벗어날 때 트리거됩니다. drop——드래그된 요소가 릴리스 영역에 드롭될 때 트리거됩니다.

<!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() ——지정된 형식으로 데이터를 반환합니다.

setData(,

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

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

<!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) 파일 드래그 앤 드롭:

File 객체에 정의된 속성

이름——파일 이름을 가져옵니다.

type——파일 형식을 가져옵니다. MIME 유형으로 표시됨

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

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            .table {display:table;}
            .row {display:table-row;}
            .cell {display: table-cell; padding: 5px;}
            .label {text-align: right;}
            #target {border: medium double black; margin:4px; height: 50px;
                width: 200px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
        </style>
    </head>
    <body>
        <form id="fruitform" method="post" action="http://titan:8080/form">
            <p class="table">
                <p class="row">
                    <p class="cell label">Bananas:</p>
                    <p class="cell"><input name="bananas" value="2"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Apples:</p>
                    <p class="cell"><input name="apples" value="5"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Cherries:</p>
                    <p class="cell"><input name="cherries" value="20"/></p>
                </p>
                <p class="row">
                    <p class="cell label">File:</p>
                    <p class="cell"><input type="file" name="file"/></p>
                </p>
                <p class="row">
                    <p class="cell label">Total:</p>
                    <p id="results" class="cell">0 items</p>
                </p>                
            </p>
            <p id="target">
                <p id="msg">Drop Files Here</p>
            </p>            
            <button id="submit" type="submit">Submit Form</button>
        </form>
        <script>
            var target = document.getElementById("target");     
            var httpRequest;
            var fileList;
                         
            document.getElementById("submit").onclick = handleButtonPress;                    
            target.ondragenter = handleDrag;
            target.ondragover = handleDrag;
            
            function handleDrag(e) {
                e.preventDefault();
            }
            
            target.ondrop = function(e) {
                fileList = e.dataTransfer.files;
                e.preventDefault();
            }          
                         
            function handleButtonPress(e) {
                e.preventDefault();
                 
                var form = document.getElementById("fruitform");
                var formData = new FormData(form);
                 
                if (fileList || true) {
                    for (var i = 0; i < fileList.length; i++) {
                        formData.append("file" + i, fileList[i]);
                    }
                }  
                 
                httpRequest = new XMLHttpRequest();
                httpRequest.onreadystatechange = handleResponse;
                httpRequest.open("POST", form.action);
                httpRequest.send(formData);
            }
                         
            function handleResponse() {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    var data = JSON.parse(httpRequest.responseText);
                    document.getElementById("results").innerHTML = "You ordered "
                        + data.total + " items";
                }
            }
         </script>
    </body>
</html>

로그인 후 복사

추천 html5 강좌: php 중국어 웹사이트html5 비디오 온라인 튜토리얼

위 내용은 HTML5 드래그 앤 드롭 학습 및 전체 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.