將資料拖曳到 HTML 元素中

Adobe AIR 1.0 以及更新的版本

預設的行為只允許將文字拖曳到頁面的可編輯區域。您可藉由在元素的開頭標籤中加入 contenteditable 特質,以指定讓該元素及其子元素成為可編輯的項目。您也可以將文件物件的 designMode 屬性設定為 "on",使整份文件成為可編輯。

針對任何能夠接受拖曳的資料之頁面元素,您可以處理其 dragenterdragoverdrop 事件,如此便能支援替代的拖入行為。

啟用拖入

若要處理拖入手勢,您必須先取消預設的行為。對於任何您想要用來當做放下目標的 HTML 元素,偵聽其 dragenterdragover 事件。在這些事件的處理常式中,呼叫所傳送之事件物件的 preventDefault() 方法。取消預設的行為後,不可編輯的區域就能接受放下動作。

取得放下的資料

您可以在 ondrop 事件的處理常式中存取放下的資料:

function doDrop(event){ 
    droppedText = event.dataTransfer.getData("text/plain"); 
}

使用 dataTransfer.getData() 方法並且傳入所要讀取資料格式的 MIME 類型,將資料讀入剪貼簿。您可以使用 dataTransfer 物件的 types 屬性,找出可用的資料格式為何。types 陣列中包含每一種可用格式的 MIME 類型字串。

一旦您在 dragenter 或 dragover 事件中取消了預設的行為,就必須自行將任何放下的資料插入文件中適當的位置。目前並無任何 API 可將元素內的滑鼠位置轉換成插入點。這項限制導致插入類型的拖曳手勢變得較難實作。