Javascript drop event dataTransfer.getData（）返回&引用；在Firefox上

我试图找出为什么AngularJS应用程序上的拖放功能在Firefox上不起作用，但在Chrome上却起作用，在研究了一段时间后，我不知道出了什么问题，因为它显然应该起作用

这是drop事件侦听器：

    document.addEventListener("drop", function(event) {
        console.log(event);
        event.preventDefault();
        vm.msg = {};
        vm.msg.appName = event.dataTransfer.getData("appName");
        vm.msg.code = event.dataTransfer.getData("code");
        vm.msg.url = event.dataTransfer.getData("url");
        vm.msg.structure = event.dataTransfer.getData("structure");
        console.log(vm.msg);
        dropping(vm.msg);
    });

在Chrome上，此功能非常有效。然而，在firefox上，它“起作用”。捕获事件，执行代码，甚至。dataTransfer具有所有预期类型（appName、代码、url、结构等），为所有类型正确定义了“种类”（字符串）。。。我和萤火虫相处得很好

但是

event.dataTransfer.getData（“appName”）

（或任何类型）返回空字符串

“”

，并且不会引发错误或警告。我不知道出了什么问题，也不知道我错过了什么

---

//编辑2017-05-26：更多信息

由于进行删除的模板来自其他应用程序共享的指令，因此我必须从控制器应用更改：

    angular.element('#dropSide').bind('dragover', function(){

        if (vm.itemsDragging.length === 0){
          vm.itemsDragging = angular.element(' .tree-row.tree-row-type,.tree-row.tree-row-type-level');
        }

        angular.forEach(vm.itemsDragging,function(obj){
            $(obj).unbind('dragover');
            $(obj).bind('dragover', function(event){
              vm.node = $(event.currentTarget.children[0].children[0]);
              event.preventDefault();
              $(obj).addClass('dragging');
            });
            $(obj).unbind('dragleave');
            $(obj).bind('dragleave', function(event){
              event.preventDefault();
              $(obj).removeClass('dragging');
            });
            $(obj).unbind('drop');
            $(obj).bind('drop', function(event){
              event.preventDefault();
              $(obj).removeClass('dragging');
            });
        });
    });

这在Firefox上运行良好

        element.bind("dragstart", function (eventObject) {
            console.log('dragstart');
            for (var attr in attributes) {
                if (attr.substring(0, 4) === 'drag') {
                    eventObject.dataTransfer.setData(attr.substring(4).toLowerCase(), attributes[attr]);
                }
            }

阻力的来源是另一个域上的angular应用程序，我们可以这样访问：

  <div class="container-vide">
    <object ng-cloak 
            id="dragsource"
            data="https://{{vm.dragsourceurl}}" 
            type="text/html">      
    </object>
  </div>

模板

<span ng-draggable 
            drag-appname="App Name" 
            drag-structure="Default Structure"
            drag-code="1" 
            drag-url="mockurl.com"
            class="draggable">
</span> 

在Chrome中，在drop事件中，我得到'none'作为dropEffect（所以更改对该事件没有影响），但在Firefox中，drop事件中的'copy'作为dropEffect

这是迄今为止我发现的唯一区别

---

在此之前，我现在的理论是，我在Firefox上使用dragover事件进入drop侦听器，当然它还不允许访问数据。尽管如此，我仍然不知道为什么会出现这种情况，也不知道如何修复它。

请参阅下面我检查过的代码，它在firefox中正常工作

功能拖动（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
ev.dataTransfer.setData（“应用程序名”、“默认应用程序”）；
ev.dataTransfer.setData（“代码”、“代码-1”）；
ev.dataTransfer.setData（“url”http://www.example.com");
ev.dataTransfer.setData（“结构”、“默认结构”）；
}
函数删除（事件）{
event.preventDefault（）；
var data=event.dataTransfer.getData（“文本”）；
event.target.appendChild（document.getElementById（数据））；
var-vm=[]；
vm.msg={}；
vm.msg.appName=event.dataTransfer.getData（“appName”）；
vm.msg.code=event.dataTransfer.getData（“代码”）；
vm.msg.url=event.dataTransfer.getData（“url”）；
vm.msg.structure=event.dataTransfer.getData（“结构”）；
console.log（vm.msg）；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}

#第1部分{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}

放下我

我编辑了我的原始帖子，请看一看。我想我已经像你的例子那样做了。

event.originalEvent.dataTransfer.dropEffect = 'copy';