站長(zhǎng)資訊網(wǎng)今天將和大家分享有關(guān)HTML5中拖放元素的用法，具有一定的參考價(jià)值，希望對(duì)大家有所幫助。
【推薦課程：HTML5教程】
拖(drag)放(drop)在頁面中是一種常見的HTML5特效，它所表示的就是抓取對(duì)象以后再拖放到另一個(gè)位置。在 HTML5 中，任何元素都能可以進(jìn)行拖放，所以接下來在文章中將通過實(shí)例詳細(xì)告訴大家如何實(shí)現(xiàn)拖動(dòng)效果。
拖放效果所需的知識(shí)點(diǎn)
draggable
規(guī)定元素是否可拖動(dòng)，一般情況下鏈接和圖片默認(rèn)是可拖動(dòng)的。
true：規(guī)定元素是可拖動(dòng)的。
false： 規(guī)定元素是不可拖動(dòng)的。
auto：使用瀏覽器的默認(rèn)特性。
拖放元素時(shí)觸發(fā)的事件
ondragstart ：拖動(dòng)元素開始時(shí)所觸發(fā)的事件
ondrag：元素正在拖動(dòng)時(shí)觸發(fā)的事件
ondragend：用戶完成元素拖動(dòng)后觸發(fā)的事件
釋放目標(biāo)時(shí)觸發(fā)的事件
ondragenter：被拖動(dòng)元素進(jìn)入拖動(dòng)范圍時(shí)觸發(fā)事件
ondragover ：表示在什么放置被拖動(dòng)的數(shù)據(jù)所觸發(fā)的事件。
ondragleave：被拖動(dòng)元素離開拖動(dòng)范圍時(shí)觸發(fā)的事件
ondrop： 鼠標(biāo)離開拖放元素時(shí)
案例分享：將圖片放置到box盒子中
（1）設(shè)置元素為可拖放的
<img id="drag1" src=images/1.jpg" draggable="true">
（2）元素拖動(dòng)時(shí)發(fā)生的情況（拖）
dataTransfer：保存拖動(dòng)的數(shù)據(jù)
text為數(shù)據(jù)類型，event.target.id為數(shù)據(jù)，將數(shù)據(jù)賦值給dataTransfer保存。
function drag(event) { event.dataTransfer.setData("Text",event.target.id); }
（3） 將元素拖動(dòng)到指定位置（放）
默認(rèn)情況下無法將元素拖動(dòng)放到另一個(gè)位置，因此需要取消默認(rèn)事件，需要用到preventDefault()方法
其中 setData()方法指被拖數(shù)據(jù)的數(shù)據(jù)類型和值
appendChild() 方法從一個(gè)元素向另一個(gè)元素中移動(dòng)元素。
function drop(event) { event.preventDefault();//取消瀏覽器的默認(rèn)行為 var data=event.dataTransfer.getData("Text");//獲取指定格式的數(shù)據(jù) event.target.appendChild(document.getElementById(data)); }
完整代碼
<body> <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img src="images/1.jpg" id="drag1" draggable="true" ondragstart="drag(event)"> <script> function allowDrop(event) { event.preventDefault();//取消事件默認(rèn)行為 } //拖 function drag(event){ event.dataTransfer.setData("Text",event.target.id) } //放 function drop(event){ event.preventDefault(); var data=event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)) } </script> </body>
效果圖
總結(jié)：
