html5之拖放的学习和完整实例代码

本文学习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之拖放的学习和完整实例代码的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。