HTML5 Drag and Drop功能DataTransfer物件format參數注意事項

Drag and Drop（DND）是HTML5裡一個趣味與實用性很高的一個功能，在實作時發現一個有趣的小問題。我們從程式碼來看問題比較好說明。

以下為http://msdn.microsoft.com/en-us/library/ie/ms536744(v=vs.85).aspx範例程式碼：

var sImageURL;
function InitiateDrag() 
/*  The setData parameters tell the source object
   to transfer data as a URL and provide the path.  */
{   
    event.dataTransfer.setData("URL", oImage.src);
}
function FinishDrag()
/*  The parameter passed to getData tells the target
    object what data format to expect.  */
{
    sImageURL = event.dataTransfer.getData("URL")
    oTarget.innerText = sImageURL;
}

以下為http://www.w3schools.com/html/html5_draganddrop.asp範例程式碼：

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

問題點於在setData方法的format參數，完整是setData(format,data)。以上程式能正常執行，我們再看其他程式。

以下為https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations的範例程式：

var dt = event.dataTransfer;
dt.setData("application/x-bookmark", bookmarkString);
dt.setData("text/uri-list", "http://www.mozilla.org");
dt.setData("text/plain", "http://www.mozilla.org");

Mozilla真的是非常嚴謹，拍拍手。有沒有看差異點？format參數有兩種寫法，一種是簡寫，一種是正式MIME的寫法。不過這不是好現象，如果在大量導入HTML5開發的情況下，A開發人員使用簡寫方式，B開發人員使用MIME方式，這會造成衝突，或是，A開發人員不懂B開發人員為什麼這樣寫，以為是B開發人員寫錯了，順手修改，這一改可能是災難的開始…（真的，看下去就知道）。

HTML5是規範

HTML5最大目標就是給一個【統一的規範標準】，雖然目前還有一段路要走，但是開發人員應該盡量走符合規範的路，以免未來發生不必要的問題。

在W3C的裡我們很容易找到答案，在http://dev.w3.org/html5/spec/dnd.html#dom-datatransfer-setdata中第4點馬上給非常明確的解答：

• If format equals "text", change it to "text/plain".
• If format equals "url", change it to "text/uri-list".

也就說，W3C希望我們是使用MIME的方式指定format參數。

HTML5還在進步

HTML5還在進步，所以很多內容都還未【定案】，今天對的內容，在定案時是對是錯，還不知道。只能說，要多多注意這方面的資訊，盡量以規範內容來走，如果未來瀏覽器不幫忙容錯（雖然不太可能），造成應用程式的不能運作，怎麼辦呢？