Question

我试图找出拖拽的原因。我们的AngularJS应用程序中的drop功能不适用于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上，它＆＃34;工作＆＃34;。捕获事件，执行代码，even.dataTransfer具有所有预期类型（appName，代码，url，结构等），＆＃39; kind＆＃39;正确定义了所有这些（字符串）...我只是看到了Firebug就可以了。

但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。

拖动的来源是另一个域上的角度应用程序，我们可以像这样访问：

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

在该另一个域上使用自定义的ng-draggable指令来填充数据。也适用于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]);
                }
            }

模板

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

//编辑：再次，更多信息

今天我一直在调试很多人来发现差异＆＃34;游戏到目前为止我只发现了一个。

对于Chrome / Firefox，事件的管理完全相同，但我发现（基于答案：HTML5 drop event doesn't work unless dragover is handled）如果我更改了 dragover 事件的dropEffect从没有＆＃39;复制＆＃39;

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

在Chrome中，在丢弃事件中，我得到了没有＆＃39;作为dropEffect（因此更改对此事件没有任何影响），但在Firefox中，drop事件已经复制了＆＃39;作为dropEffect。

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

因此，我现在的理论是，我在Firefox上使用dragover事件进入掉落听众，这当然不允许访问数据。不过，我不知道为什么会这样做，也不知道如何修复它。

Answer 1

请参阅下面的代码我已经检查过它在firefox中运行。

＆＃13;

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("appName", "Default App");
    ev.dataTransfer.setData("code", "Code - 1");
    ev.dataTransfer.setData("url", "http://www.example.com");
    ev.dataTransfer.setData("structure", "Default Structure");
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
    var vm = [];
    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);
}

function allowDrop(ev) {
    ev.preventDefault();
}

＆＃13;

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

＆＃13;

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<label id="lbl" draggable="true" ondragstart="drag(event)">Drop me</label>

＆＃13;

drop event dataTransfer.getData（）返回＆＃34;＆＃34;在Firefox上

1 个答案: