設置兩個div作爲HTML5的可拖動區域

Question

您好HTML5開發人員，我試圖設置兩個不同的div作爲傳入文件的可拖動區域。但是，似乎只有其中一個可以同時處於活動狀態，我怎樣才能讓他們都準備好接受文件的dnd。這是我的代碼：

var node = dojo.byId("welcomeDialog1_Id"); 
var node2 = dojo.byId("firstDialogBackground"); 
    // Reference 
    // http://www.html5rocks.com/features/file 
    // http://www.html5rocks.com/tutorials/dnd/basics/ 
    // https://developer.mozilla.org/En/DragDrop/Drag_Operations 
    dojo.connect(node, "dragenter", function(evt){ 
     // If we don't prevent default behavior here, browsers will 
     // perform the default action for the file being dropped i.e, 
     // point the page to the file. 
     evt.preventDefault(); 
    }); 

    dojo.connect(node, "dragover", function(evt){ 
     evt.preventDefault(); 
    }); 
    dojo.connect(node, "drop", handleDrop); 



    dojo.connect(node2, "dragenter", function(evt){ 
     evt.preventDefault(); 
    }); 

    dojo.connect(node2, "dragover", function(evt){ 
     evt.preventDefault(); 
    }); 
    dojo.connect(node2, "drop", handleDrop); 

Answer 1

確保您的拖放區不相互嵌套或重疊...

我可以證明，至少在FF和Chrome，你可以有您的網頁上有多個放置區以接受傳入文件。我沒有用IE測試。

當我與文件DnD的工作，我發現下面的文章十分有用：

http://www.sitepoint.com/html5-file-drag-and-drop/