Question

在反应应用程序中，我们设计了一个自定义拖动功能。在使用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)
               }

Answer 1

添加空GIF作为setDragImage的图像源修复了该问题。我们只需添加： pic.src =＆＃34;数据：image / gif; base64，R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7＆＃34;

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)
               }

Answer 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，但我想这个主意很清楚。

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

2 个答案: