【推薦課程：HTML5教程】

拖(drag)放(drop)在頁面中是一種常見的HTML5特效，它所表示的就是抓取對象以后再拖放到另一個位置。在 HTML5 中，任何元素都能可以進行拖放，所以接下來在文章中將通過實例詳細告訴大家如何實現拖動效果。

拖放效果所需的知識點

draggable

規定元素是否可拖動，一般情況下鏈接和圖片默認是可拖動的。

true：規定元素是可拖動的。

false： 規定元素是不可拖動的。

auto：使用瀏覽器的默認特性。

拖放元素時觸發的事件

ondragstart ：拖動元素開始時所觸發的事件

ondrag：元素正在拖動時觸發的事件

ondragend：用戶完成元素拖動后觸發的事件

釋放目標時觸發的事件

ondragenter：被拖動元素進入拖動范圍時觸發事件

ondragover ：表示在什么放置被拖動的數據所觸發的事件。

ondragleave：被拖動元素離開拖動范圍時觸發的事件

ondrop： 鼠標離開拖放元素時

案例分享：將圖片放置到box盒子中

（1）設置元素為可拖放的

 img id= drag1 src=images/1.jpg draggable= true 

（2）元素拖動時發生的情況（拖）

dataTransfer：保存拖動的數據

text為數據類型，event.target.id為數據，將數據賦值給dataTransfer保存。

function drag(event)event.dataTransfer.setData( Text ,event.target.id);}

（3） 將元素拖動到指定位置（放）

默認情況下無法將元素拖動放到另一個位置，因此需要取消默認事件，需要用到preventDefault()方法

其中 setData()方法指被拖數據的數據類型和值

appendChild() 方法從一個元素向另一個元素中移動元素。

function drop(event)event.preventDefault();//取消瀏覽器的默認行為var data=event.dataTransfer.getData( Text //獲取指定格式的數據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();//取消事件默認行為 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 

效果圖

總結：以上就是本篇文章的全部的內容了，希望通過這篇文章對大家學習拖放元素有一定的幫助。

以上就是HTML5中如何實現圖片的拖放的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。