預設的行為只允許將文字拖曳到頁面的可編輯區域。您可藉由在元素的開頭標籤中加入
contenteditable
特質,以指定讓該元素及其子元素成為可編輯的項目。您也可以將文件物件的
designMode
屬性設定為
"on"
,使整份文件成為可編輯。
針對任何能夠接受拖曳的資料之頁面元素,您可以處理其
dragenter
、
dragover
和
drop
事件,如此便能支援替代的拖入行為。
啟用拖入
若要處理拖入手勢,您必須先取消預設的行為。對於任何您想要用來當做放下目標的 HTML 元素,偵聽其
dragenter
和
dragover
事件。在這些事件的處理常式中,呼叫所傳送之事件物件的
preventDefault()
方法。取消預設的行為後,不可編輯的區域就能接受放下動作。
取得放下的資料
您可以在
ondrop
事件的處理常式中存取放下的資料:
function doDrop(event){
droppedText = event.dataTransfer.getData("text/plain");
}
使用
dataTransfer.getData()
方法並且傳入所要讀取資料格式的 MIME 類型,將資料讀入剪貼簿。您可以使用
dataTransfer
物件的
types
屬性,找出可用的資料格式為何。
types
陣列中包含每一種可用格式的 MIME 類型字串。
一旦您在 dragenter 或 dragover 事件中取消了預設的行為,就必須自行將任何放下的資料插入文件中適當的位置。目前並無任何 API 可將元素內的滑鼠位置轉換成插入點。這項限制導致插入類型的拖曳手勢變得較難實作。
|
|
|