JAVASCRIPT網頁應用程式設計

106

|

第七章

var dt = event.dataTransfer

for (var i=0; i < dt.types.length; i++)

console.log( dt.types[i], dt.getData(dt.types[i]) );

關於置放的完整範例程式，可參考本書的範例程式檔：

assets/ch07/drop.html

。

取消拖曳 / 置放的預設行為

如果把檔案拖進網頁，瀏覽器預設會直接開啟該檔案。但通常我們會希望能阻止這種狀

況發生，因為萬一使用者不小心將檔案拖到置放區域以外的地方，就會跳離網頁應用程

式（這並非我們所樂見的狀況）。要阻止瀏覽器的這種預設行為，做法非常簡單—取消

body

標籤的

dragover

事件即可。

$("body").bind("dragover", function(e){

e.stopPropagation();

e.preventDefault();

return false;

});

複製與貼上

瀏覽器和桌面的整合，除了拖曳和置放功能之外，目前也已經有一些瀏覽器支援複製與

貼上的功能。只不過相關的 API 尚未標準化，而且也還沒納入 HTML5 的規格當中，因

此，如果要實作相關功能，你必須自行決定該如何迎合各種不同的瀏覽器。

有趣的是，最早提供複製 / 貼上 API 實作的瀏覽器，仍然是 IE 5.0。WebKit 稍加改良

Microsoft 所設計的 API 後，將其整合進拖曳 / 置放 API 中。兩組 API 的介面可說是完

全一樣，唯一的差別只有物件不同 ...