站長資訊網(wǎng)本文學(xué)習(xí)html5的拖放并完整實(shí)例代碼，希望對H5初學(xué)者有幫助！
1)創(chuàng)建來源項(xiàng)目
1.1)draggable屬性的值：
true——此元素能被拖動；
false——此元素不能被拖動；
auto——瀏覽器能夠自主決定某個元素能否被拖動；
1.2）被拖動元素的事件：
dragstart——在元素開始被拖動時觸發(fā)；
drag——在元素被拖動時重復(fù)觸發(fā)。
dragend——在拖動操作完畢時觸發(fā)；
2）創(chuàng)建釋放區(qū)
2.1）釋放區(qū)事件：
dragenter——當(dāng)被拖動元素進(jìn)入釋放區(qū)所占領(lǐng)的屏幕空間時觸發(fā)；
dragover——當(dāng)被拖動元素在釋放區(qū)內(nèi)觸發(fā)時移動觸發(fā)；
dragleave——當(dāng)被拖動元素沒有放入就離開釋放區(qū)時觸發(fā)；
drop——當(dāng)被拖動元素在釋放區(qū)放下時觸發(fā)。
<!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)與拖放操作所觸發(fā)的事件同一時候派發(fā)的對象是DragEvent，它派生于MouseEvent。
DragEvent對象定義的額外屬性：
dataTransfer——返回用于數(shù)據(jù)傳輸?shù)结尫艆^(qū)的對象（DataTransfer）；
3.2)DataTransfer對象定義的屬性：
types——返回?cái)?shù)據(jù)的格式。
getData(<format>)——返回指定格式的數(shù)據(jù)；
setData(<format>,<data>)——設(shè)置指定格式的數(shù)據(jù)。
clearData(<format>)——移除指定格式的數(shù)據(jù)。
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）拖放文件：
File對象定義的屬性
name——獲取文件名稱。
type——獲取文件類型。以MIME類型表示；
size——獲取文件大小（以字節(jié)計(jì)算）；
<!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>
相關(guān)html5課程推薦：php中文網(wǎng)html5視頻在線教程
