將 HTML 元素中的資料拖曳至目標

Adobe AIR 1.0 以及更新的版本

設定拖曳的資料

預設的行為讓您能夠經由拖曳方式，複製 HTML 網頁中大部分的內容。您可以使用 CSS 屬性 -webkit-user-select 和 -webkit-user-drag 來控制允許拖曳的內容。

請在 dragstart 事件的處理常式中覆寫預設的拖出行為。只要對事件物件的 dataTransfer 屬性呼叫 setData() 方法，即可將您自己的資料放入拖曳手勢。

在您並未依賴預設行為的情況下，如需指定來源物件支援的拖曳效果，請對 dragstart 事件發生時所傳送的事件物件設定 dataTransfer.effectAllowed 屬性。您可以選擇各種效果的任意組合。例如，若來源元素同時支援「複製」和「連結」效果，請將該屬性設定為 "copyLink" 。

設定拖曳的資料

在 dragstart 事件的處理常式中，使用 dataTransfer 屬性來加入拖曳手勢所傳輸的資料。使用 dataTransfer.setData() 方法並且傳入 MIME 類型以及要傳輸的資料，將資料放入剪貼簿。

例如，假設您的應用程式中有一個 ID 為 imageOfGeorge 的影像元素，就可以使用下列 dragstart 事件處理常式。此範例加入了 George 照片的多種資料格式表示形式，從而使其它應用程式便於取用拖曳的資料。

function dragStartHandler(event){         
    event.dataTransfer.effectAllowed = "copy"; 
     
    var dragImage = document.getElementById("imageOfGeorge"); 
    var dragFile = new air.File(dragImage.src); 
    event.dataTransfer.setData("text/plain","A picture of George"); 
    event.dataTransfer.setData("image/x-vnd.adobe.air.bitmap", dragImage); 
    event.dataTransfer.setData("application/x-vnd.adobe.air.file-list", 
                                new Array(dragFile)); 
}

備註：當您呼叫 dataTransfer 物件的 setData() 方法時，預設的拖放行為不會加入任何資料。