站長資訊網今天將和大家分享有關HTML5中拖放元素的用法，具有一定的參考價值，希望對大家有所幫助。
【推薦課程：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>
效果圖
總結：
