簡單自學web前端——H5 拖放
阿新 • • 發佈：2019-02-16
H5新特性——拖放
拖放（Drag和drop）是 HTML5 標準的組成部分，拖放是一種常見的特性，即抓取物件以後拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放，非常的好用和重要的，接下來我就簡單介紹一下。
拖放的過程： 拖動開始——>拖動過程——>拖動結束 拖放用到的相關函式： 被拖放的元素： (1)ondragstart：源物件開始被拖動 (2)ondrag：源物件被拖動過程中(滑鼠可能在移動也可能未移動) (3)ondragend：源物件被拖動結束 目的物件： (1)ondragenter：目標物件被源物件拖動著進入 (2)ondragover：目標物件被源物件拖動著懸停在上方 (3)ondragleave：源物件拖動著離開了目標物件 (4)ondrop：源物件拖動著在目標物件上方釋放/鬆手 拖放的簡單步驟 1、設定元素為可拖放 首先，為了使元素可拖動，把draggable屬性設定為true。 2、設定被拖動的函式 新增ondragstart事件，這個屬性會呼叫了一個函式，drag(event)，它規定了被拖動的資料。 函式中的dataTransfer.setData()方法設定被拖資料的資料型別和值。 例子： function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } 傳送資料的資料型別是 "Text"，值是被拖動元素的id。 3、設定目的物件的函式 （1）放到何處 新增ondragover事件，這個屬性規定在何處放置被拖動的資料。 預設地，無法將資料/元素放置到其他元素中。 這要通過呼叫ondragover事件的 event.preventDefault()方法： function allowDrop(ev) { ev.preventDefault(); } （2）進行放置 新增ondrop事件，當放置被拖資料時，會發生ondrop事件。 ondrop 屬性呼叫了一個函式，drop(event)： function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } 重點： 呼叫preventDefault()來避免瀏覽器對資料的預設處理（drop事件的預設行為是以連結形式開啟）。 通過 dataTransfer.getData("Text") 方法獲得被拖的資料。該方法將返回在 setData() 方法中設定為相同型別的任何資料。被拖資料是被拖元素的id。 最後一行程式碼是把被拖元素追加到放置元素（目標元素）中。
自己寫的一個菜譜選單的簡單的小例子，與大家分享下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<script type="text/javascript">
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function 結果截圖：
可以將左邊菜譜中的div 拖放到右邊的選單的div中。
希望對大家有用，如果有錯誤可以指出來，大家互相學習！