Question

我只是将一个简单的div的{{1}}属性设置为draggable，如下所示：

true

#aDiv {
    width: 400px;
    height: 550px;
    background-color: blue;
    border: 1px solid black;
}

当我拖动项目时，我在Chrome，Opera，Edge和Internet Explorer 11上看到拖动图像，而在Firefox上却看不到。

为什么在Firefox上没有可拖动项目的默认拖动图像？我想念什么吗？

我正在Windows 10上使用Firefox 67。

更新

Jaydeep对原始问题的评论具有指向答案的链接，这表明我们必须为可拖动元素提供<div id = "aDiv" draggable="true"></div>事件处理程序，并且还必须按顺序在dragstart对象上设置一些数据让Firefox开始显示拖动图像。因此，我按如下方式更改了代码，但它仍然对Firefox无效。有什么想法吗？

event.dataTransfer

$(document).ready(function() {
    $("#aDiv").on("dragstart", function(event) {
        event.dataTransfer.setData("text", "foo");
        event.dataTransfer.effectAllowed = "move";
    });
});

Answer 1

“要使元素可拖动，请将draggable属性设置为“ true”。但这不足以使元素在Firefox中可拖动。您需要找到dragstart事件并在DataTransfer对象上设置一些数据：”

document.getElementById('aDiv').addEventListener('dragstart', function(e){
  e.dataTransfer.setData('text', 'foo');
});

function dragstart(component, event, helper) {
     component.set("v.dragid", event.target.dataset.dragId);
     event.dataTransfer.setData('Text', component.id);
}

#aDiv {
    width: 400px;
    height: 550px;
    background-color: blue;
    border: 1px solid black;
}

<div id = "aDiv" draggable="true"></div>

引用自Here

Answer 2

我做了一些调查工作，以了解为什么拖动图像在Firefox中没有出现，这是我的发现。

正如Jaydeep所链接的答案所暗示的那样，对于Firefox要显示拖动图像，您确实必须为dragstart事件编写事件处理程序，并且必须，在该事件处理程序中，将dataTransfer对象上的数据设置为某些值。这两个条件都必须为真，然后才会显示拖动图像。

但是，如我所做的this video所示，更深入的调查强调了真正的问题是，在Firefox中，拖动图像的外观与{{ 1}}对象。

例如，如果dataTransfer对象中没有任何内容，则dataTransfer event 仍会触发，并且事件处理程序仍将执行，但是如果您在dragstart对象中未放置任何内容，Firefox将不会显示拖动图像。这是浏览器方面的古怪行为。
在将jQuery与拖放的HTML 5 API一起使用时要小心。 JQuery将dataTransfer包装到其自己的自定义事件中并发送该自定义事件。因此，如果您使用的是jQuery，并且编写了以下代码段，则它将触发您的DragEvent事件处理程序，但不会绘制拖动图像，因为dragstart事件仍然为空因为事件处理程序将作为参数接收的dataTransfer对象将不是HTML 5 API的event，而是自定义的jQuery DragEvent对象，并且该对象将没有event属性。

相反，要访问dataTransfer对象，请在使用jQuery时使用dataTransfer。请查看this video以获取插图。

Firefox 67没有默认的拖动图像

2 个答案: