Нет перетаскивания изображения по умолчанию на Firefox 67

Question

Я просто установил простой атрибут div draggable на true примерно так:

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

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

При перетаскивании элемента я вижу изображения перетаскивания в Chrome, Opera, Edge и Internet Explorer 11, но не в Firefox.

Почему в Firefox нет изображения по умолчанию для перетаскиваемых объектов? Я что-то упустил?

Я использую Firefox 67 в Windows 10.

UPDATE

Комментарий Jaydeep к исходному вопросу содержит ссылку на ответ, которая предполагает, что мы должны предоставить обработчик события dragstart для перетаскиваемого элемента, а также установить некоторые данные на объекте event.dataTransfer, чтобы запустить Firefox. отображение перетаскивания изображения. Итак, я изменил свой код следующим образом, но он по-прежнему не влияет на Firefox. Есть идеи почему?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id = "aDiv" draggable="true"></div>

Answer 1

Я провел некоторую следственную работу над тем, почему перетаскиваемое изображение не появляется в Firefox, и вот мои выводы.

1. Как следует из ответа, связанного с Jaydeep, для Firefox действительно верно, что для отображения перетаскиваемого изображения вы должны написать обработчик события для события dragstart, а также вы must , в этом обработчике событий установите данные объекта dataTransfer в что-либо. Оба эти условия должны быть выполнены, и только тогда появится изображение для перетаскивания.

   Однако более глубокий зонд, как показано в этого видео , которое я сделал, подчеркивает, что реальная проблема заключается в том, что в Firefox появление перетаскиваемого изображения связано с наличием данных в dataTransfer объект .

   Так, например, если в объекте dataTransfer ничего нет, событие dragstart все равно сработает, и ваш обработчик событий все равно будет выполнен, но если вы ничего не поместите в dataTransfer объект, Firefox не будет отображать перетаскиваемое изображение. Это странное поведение со стороны браузера.

2. Будьте осторожны при использовании jquery с HTML 5 API перетаскивания. JQuery упаковывает DragEvent в свое собственное пользовательское событие и отправляет это пользовательское событие. Итак, если вы используете jQuery и пишете что-то вроде приведенного ниже фрагмента, он запустит ваш обработчик события dragstart, но не будет рисовать перетаскиваемое изображение, потому что событие dataTransfer все равно будет пустым, так как event объект, который будет получен вашим обработчиком событий в качестве аргумента, будет не DragEvent API HTML 5, а пользовательским объектом jQuery event, и у этого объекта не будет свойства dataTransfer.

   Вместо этого, чтобы добраться до объекта dataTransfer, используйте event.originalEvent.dataTransfer при использовании jQuery. Пожалуйста, смотрите это видео для иллюстрации.

Answer 2

"Чтобы сделать перетаскиваемый элемент, установите для атрибута 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>

Ссылка взята с Здесь