React-dnd: React DnD 不适用于 Chrome 59

不是这样； 它工作得很好。 尝试在没有任何扩展程序的情况下运行 Chrome

@theTechie您是否在 Windows 上的 Mac 上检查过？ 在 Mac 上它工作正常。

我在 Mac 上检查过。 是特定平台的问题吗？

@theTechie出于某种原因，react-dnd 不会像往常一样触发“dragend”。 我在几台机器上测试过，一台 Mac 有同样的问题，所有 Windows 都有这个问题。 任何想法？

我在 Chrome 上的多个平台 Windows 8.1 / Windows 7 以及 IE 10 和 IE 11 上进行了测试。它对我来说很好用。

@hunterbmt - 您在控制台中看到任何错误吗？ 你能在某些情况下分享一个 GIF 动图吗？

@theTechie我在 react dnd 的示例站点上测试过，没有任何问题。 但是在我们的应用程序中，Chrome 59 在某些情况下没有触发“dragend”，这在 Chrome 58、FF、Safari 甚至 IE 上都可以正常工作。
如果浏览器在一段时间后没有触发它，我通过在“drop”之后手动触发“dragend”来修复它。
我不知道其他人是否也无法解决此问题，如果是这种情况，我可以将修复程序移至 react-dnd。

查看Chrome 59的更新日志但没有找到任何内容，如果您有任何见解，我将非常感谢您的输入。

@hunterbmt我认为这可能是您的代码所特有的； 即使我已经在多个实例中使用过 react-dnd 并且它们都在 Chrome 59 上正常工作。

不幸的是，我无法告诉您为什么会发生这种情况。 也许，如果您可以在这里分享您的代码，我可以尝试找到一些东西。

我在 Windows 上的 Chrome 59.0.3071.86 中遇到了同样的问题。 它在 Firefox 中运行良好，在早期的 Chrome 版本中运行良好。 包.json：

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

结果和2.4.0/2.4.1一样

解决了这个黑客：

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke我最终得到了非常相似的 hack，但是当我在不可放置的区域中快速拖放时，问题仍然会发生，Chrome 无法触发“dragend”，当然也不会触发“drop”。 你能从你身边检查一下吗？

@hunterbmt我在不可掉落的区域掉落没有问题。 我还没有检查触发了哪些事件，但是 react-dnd 没有进入损坏状态，所以一切似乎都运行良好。

我创建了一个 PR 来通过简化触发 endDrag 的条件来解决这个问题和潜在问题
https://github.com/react-dnd/react-dnd/pull/801

我有同样的问题，虽然不是每次都遇到，只是在某些情况下，例如这种情况是：
我有一个可以放在放置区域内的小部件，当放置小部件时，该放置区域将呈现一些 html。 如果我选择删除视频小部件，它将呈现iframe并且它会中断，之后我无法拖动任何其他小部件（ dragend事件不会被触发）。 但是如果我用一些文本或图像替换iframe ，它工作得很好，它在 Chrome 59 之前工作，它在任何其他浏览器中工作，我想不通，是问题在于Chrome 还是 react-dnd？

@rogyvoje我相信 Chrome 在触发“dragend”的事件中改变了一些东西。 试图搜索更多信息，但我没有看到他们在任何地方提及。
顺便说一句，根据“dragstart”之后的“mousemove”在大多数情况下取决于“dragend”和在某些情况下取决于“mousemove”（从DOM中删除拖动元素）作为我的PR更有意义和更简单。

@hunterbmt感谢揭秘 😄
但是我如何通过 npm/yarn 使用您的拉取请求？ 因为好像没有合并，还是我错了？ 😕

@rogyvoje我认为你可以，而不是版本直接指向我的分支。 PR 已合并，但 react-dnd 尚未发布新版本，因此您无法直接从 react-dnd npm/yarn 获取它。

@hunterbmt
我试着这样做：

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

但是总是弹出登录界面😕

此线程中的任何人都可以提供可重现的问题案例吗？ 我经常使用react-dnd但我无法识别 Chrome 59 上的任何问题，所以我很想有一个可重现的案例，其中react-dnd失败，因为 Chrome 59 不触发drag/drop事件正确。

我认为如果有问题，你们中的一些首先看到问题的人应该很容易重现它，所以请尝试花时间发布一个可重现的案例（它可以是 github 存储库或此处发布的代码） https://codesandbox.io/) 并尝试提供任何有意义的信息（如操作系统、react-dnd 版本等）。 谢谢！

@bjrmatos在这里，我做了一个，这是我的情况，我希望它会有所帮助！

https://github.com/rogyvoje/react-dnd-chrome-59

在 chrome 59 和当前更新上对其进行了测试：
版本 60.0.3112.78（官方版本）（64 位）

至于 Windows 信息：
操作系统名称：Microsoft Windows 10 Pro
操作系统版本：10.0.14393 不适用 Build 14393

在 Chrome 上测试：版本 55.0.2883.87（64 位）（在 Linux/Mint 18 上）并且完美运行......

@rogyvoje 谢谢！ 稍后我会看看，让我们看看我是否可以在我的 Windows 7 VM 中看到问题，否则我将尝试另一个带有 Windows 10 的 VM。谢谢！

嗨@rogyvoje我已经在最新的 chrome 版本中直接尝试过你的存储库，因为你说你在那里遇到了同样的问题（版本 60.0.3112.78（官方版本）（64 位）- Windows 10 PRO）但我没有看到任何错误。

这是预期的结果吧？

有没有/更多其他步骤可以重现您的问题？

我已经用[email protected] （而不是使用yarn ）安装了依赖项，这里只是为了记录，是安装的依赖项的确切版本：

注意：我使用的是 Windows 10 PRO VM（因为我的主要操作系统是 OSX El Capitan，其中不存在 chrome 问题）

并且在禁用所有 chrome 扩展的情况下结果相同：

@rogyvoje我刚刚阅读了您过去的评论，现在我可以重现该问题，正如您所说的第一次拖动有效，但是如果有人尝试第二次拖动，则会出现Cannot call hover after drop错误。

感谢存储库，我将尝试深入研究问题并寻找让每个人都满意的解决方案。

似乎该错误已得到确认： https :

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

作为记录，我也可以在 Chrome (60) Mac OS (El Capitan) 中使用相同的示例重现错误（不确定它是否也出现在 Chrome 59 for Mac 中），因此在使用 Chrome (> =59) 以及使用 iframe 时😂

@bjrmatos太好了，很高兴你成功复制了它😄
只是不确定接下来会发生什么，我们应该等待 Chrome 61 吗？ 😂

只是不确定接下来会发生什么，我们应该等待 Chrome 61 吗？

也许，无论如何我正在尝试找到一个不错的补丁，使 react-dnd 在 Chrome 59、60 中工作，所以我稍后会在这里发布更多更新👍

我认为这可以解决问题。 https://github.com/react-dnd/react-dnd/pull/820
它已经合并，但未发布。

有关于这个问题的消息吗？
我在最新的 chrome 中仍然有问题......

@ms88privat #820 解决了异常，但不是最初的问题，即在 Chrome（我使用的是 67）上呈现 iframe 时永远不会调用source.endDrag 。

在 3.0 之前，我们使用了@0rvar提供的解决方法，但是对于更严格的 TS 类型，不可能覆盖实例方法或私有类方法。

您可以通过将 endDrag 添加到 @rogyvoje`s test repo 中的Video.js来重现它

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

第一次拖动它时，Chrome 不会调用endDrag 。

当您将 iframe 包含在 chrome 内的页面中时，它也会冻结（59 直到当前） @0rvar的修复在这种情况下也有效

这在昨天发布的 chrome 72 中得到了修复。

此问题已自动标记为陈旧，因为它最近没有活动。 如果没有进一步的活动发生，它将被关闭。 感谢你的贡献。