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 < 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 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课程推荐：html5视频在线教程
以上就是html5之拖放的学习和完整实例代码的详细内容。