现今一些网站的后台都使用拖曳功能来更改网站布局等,尤其模板建站都采用这种方式,可以让客户不操作源码情况下修改自己的网站。今天给大家一起学习html5中拖拽功能的实现;
1.drag
当拖动某个元素时,将会依次触发下列事件:
1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件
2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖动期间,该事件一直被触发
3)dragend:拖动停止时触发该事件
上面的事件的对象是要拖动的元素
2.drop
当某元素被拖动到某个有效的放置目标时,将会依次触发下列事件:
1)dragenter:只要有元素被拖动到该有效放置目标中,便触发该事件
2)dragover:dragenter后,随即触发dragover,且只要元素还在该有效放置目标中,该事件就会一直被触发
3)dragleave/drop:如果元素被拖出了该有效的放置目标的范围,便会触发dragleave事件;反之,如果元素被放置在该有效的放置目标范围内就会触发drop事件而不会触发dragleave事件;
上面的对象是作为放置目标的元素
3.dataTransfer对象
event的dataTransfer对象属性可以在拖放操作的同时实现数据交换。
dateTransfer中最重要的是setData()和getData()方法。getData可以取得由setData保存的值。
setData有两个参数,第一个是保存的数据的类型,第二个是要保存的数据;
getData只一个参数,是setData的第一个参数。
数据的类型支持所有MIME类型,常用的是text(text/plain)和URL(text/uri-list)类型。
eg:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>drag&&drop</title> </head> <style> #testDiv{ border: 2px; border-style: solid; border-color: black; width:200px; height:200px; } .testImg{ width:100px; height:100px; } </style> <body> <img id="img1" class="testImg"src="jhjh.png"/> <img id="img2" class="testImg"src="jhjh.png"/> <div id="testDiv"></div> <script> var img1=document.getElementById("img1"); var img2=document.getElementById("img2"); var testDiv=document.getElementById("testDiv"); img1.addEventListener("dragstart",function(e){ e.dataTransfer.setData("Text",e.target.id); console.log("ondragstart"); }) img2.addEventListener("dragstart",function(e){ e.dataTransfer.setData("Text",e.target.id); console.log("ondragstart"); }) testDiv.addEventListener("dragover",function(e){ e.preventDefault(); console.log("ondragover"); }) testDiv.addEventListener("drop",function(e){ var data=e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); console.log("ondrop"); }) </script> </body> </html>
在上面的例子中,setData方法被绑定在被拖动的元素的dragstart阶段,而目标放置元素中,dragover事件绑定了event.preventDefault()以阻止dragover事件的默认动作(被拖动的元素回到原来位置),drop事件绑定了getData以获取setDate存储的信息,然后便可以把 被拖动的元素添加到放置目标中。