Javascript HTML5拖动事件未在Safari（Mac）上触发，拖动不起作用答案

【问题标题】：Javascript HTML5 Drag events not firing on Safari (Mac), dragging does not workJavascript HTML5拖动事件未在Safari（Mac）上触发，拖动不起作用
【发布时间】：2018-02-25 13:11:07
【问题描述】：

在一个 react 应用程序中，我们设计了一个自定义的拖动功能。在 Firefox 和 Chrome 上运行时，它不适用于 Safari。

在dragstart 事件之后，dragend 事件立即触发，ondrag 永远不会触发。 Dragstart 看起来像下面的代码。在这种情况下，我们不需要显示拖动图像。

onDragStart={e => {
               e.stopPropagation()
               e.dataTransfer.setData('text/plain', 'anything')
               let pic = new Image()
               pic.style.visibility = 'hidden'
               e.dataTransfer.setDragImage(pic, 0, 0)
               e.dataTransfer.effectAllowed = 'default'
               if (this.state.hover) {
                 this.calcBoxSizes(true)
               }

【问题讨论】：

标签： javascript html safari

【解决方案1】：

添加一个空的 GIF 作为 setDragImage 的图像源解决了这个问题。我们只需添加： pic.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAAAAAAEAAAIBRAA7"

onDragStart={e => {
               //console.log('ondragstart')
               e.stopPropagation()
               e.dataTransfer.setData('text/plain', 'anything')
               let pic = new Image()
               pic.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" //transparent gif, resolves issue with Safari that otherwise does not allow dragging
               pic.style.visibility = 'hidden'
               e.dataTransfer.setDragImage(pic, 0, 0)
               e.dataTransfer.effectAllowed = 'default'
               if (this.state.hover) {
                 this.calcBoxSizes(true)
               }

【讨论】：

【解决方案2】：

OP 的答案对我来说并不适用。找到解决方案in this answer。基本上需要做的是将图像创建移出事件处理程序。像这样的：

var img = document.createElement("img");   
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

这显然不是 React，但我想这个想法很清楚。

【讨论】：