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/

使用HTML5将两个div设置为可拖动区域

1 个答案: