Question

Hi there HTML5 developers, I am trying to set up two different divs to be the dragable area for the incoming file. However, it seems that only one of those can be active at a time, how can I make them both ready to accept the dnd of the file. This is the code I have:

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

Make sure that your drop zones are not nested inside each other or overlapping…

I can testify that, at least with FF and Chrome, you can have multiple drop zones on your page to accept incoming files. I did not test with IE.

When I worked with file DnD I found the following article very useful:

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