이번 글에서는 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.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!