網頁

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還在進步,所以很多內容都還未【定案】,今天對的內容,在定案時是對是錯,還不知道。只能說,要多多注意這方面的資訊,盡量以規範內容來走,如果未來瀏覽器不幫忙容錯(雖然不太可能),造成應用程式的不能運作,怎麼辦呢?

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。