本文學習html5的拖放并完整實例代碼，希望對H5初學者有幫助！

1)創建來源項目

1.1)draggable屬性的值：

true——此元素能被拖動；

false——此元素不能被拖動；

auto——瀏覽器能夠自主決定某個元素能否被拖動；

1.2）被拖動元素的事件：

dragstart——在元素開始被拖動時觸發；

drag——在元素被拖動時重復觸發。

dragend——在拖動操作完畢時觸發；

2）創建釋放區

2.1）釋放區事件：

dragenter——當被拖動元素進入釋放區所占領的屏幕空間時觸發；

dragover——當被拖動元素在釋放區內觸發時移動觸發；

dragleave——當被拖動元素沒有放入就離開釋放區時觸發；

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  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)與拖放操作所觸發的事件同一時候派發的對象是DragEvent，它派生于MouseEvent。

DragEvent對象定義的額外屬性：

dataTransfer——返回用于數據傳輸到釋放區的對象（DataTransfer）；

3.2)DataTransfer對象定義的屬性：

types——返回數據的格式。

getData( format )——返回指定格式的數據；

setData( format , 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  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——獲取文件大小（以字節計算）；

 !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 >
相關html5課程推薦：php html5視頻在線教程
以上就是html5之拖放的學習和完整實例代碼的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。