本文主要包含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>
</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)与拖放操作所触发的事件同一时候派发的对象是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>
</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 <