React-dnd: React DnD не работает в Chrome 59

Не тот случай; он работает отлично. Попробуйте запустить Chrome без расширений

@theTechie вы проверяли на Mac в Windows? На Mac работает нормально.

Я проверил на Mac. Это проблема с конкретной платформой?

@theTechie по какой-то причине

Я тестировал на нескольких платформах Windows 8.1 / Windows 7 в Chrome, а также в IE 10 и IE 11. У меня все работает нормально.

@hunterbmt - Вы видите ошибки в консоли? не могли бы вы поделиться гифкой для некоторого контекста?

@theTechie Я тестировал на примере сайта
Я исправил запуск вручную dragend после падения, если браузер не запускал его через некоторое время.
Я не знаю, не справятся ли и другие с этой проблемой, если это так, я мог бы переместить исправление в response-dnd.

Глядя на журнал изменений Chrome 59, но ничего не нашел, если у вас есть какое-либо представление, я буду очень признателен за ваш вклад.

@hunterbmt Я думаю, это может быть что-то особенное в вашем коде; даже я использовал response-dnd в нескольких экземплярах, и все они отлично работают в Chrome 59.

К сожалению, я не могу сказать вам, почему это произошло. Может быть, я могу попробовать найти что-нибудь, если вы согласны поделиться своим кодом здесь.

У меня такая же проблема в Chrome 59.0.3071.86 в Windows. Он отлично работает в Firefox и отлично работает в более ранних версиях Chrome. package.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 У меня очень похожий взлом, но проблема все еще возникает, когда я быстро перетаскиваю и опускаю в недоступную область, Chrome не запускает «dragend» и, конечно же, не запускает «drop». Не могли бы вы проверить со своей стороны?

@hunterbmt У меня нет проблем с попаданием в недоступные места. Я не проверял, какие события запускаются, но response-dnd не переходит в поврежденное состояние, поэтому вроде все работает нормально.

Я создал PR, чтобы исправить эту проблему и возможные проблемы, упростив условие для запуска endDrag
https://github.com/react-dnd/react-dnd/pull/801

У меня такая же проблема, но не каждый раз, только в некоторых случаях, например:
У меня есть виджет, который можно отбросить внутри области перетаскивания, и эта область перетаскивания будет отображать некоторый HTML-код при удалении виджета. Если я решу сбросить виджет видео, он отобразит iframe и он сломается, и после этого я не смогу перетащить другие виджеты (событие dragend не запускается). Но если я заменю этот iframe некоторым текстом или изображением, он будет работать отлично, и он работал до Chrome 59, и он работает в любом другом браузере, я не могу понять, проблема в Chrome или react-dnd?

@rogyvoje Я считаю, что Chrome что-то изменил при запуске события для dragend. Пытался найти дополнительную информацию, но я нигде не вижу, чтобы они упоминали об этом.
Кстати, в зависимости от 'mousemove' после 'dragstart' имеет больше смысла и проще, чем в зависимости от 'dragend' в большинстве случаев и 'mousemove' в некоторых случаях (перетаскивание элемента, удаленного из DOM) в качестве моего PR.

@hunterbmt, спасибо за разоблачение мистики 😄
но как я могу использовать ваш запрос на перенос через npm / yarn? Потому что вроде не сливается, или я ошибаюсь? 😕

@rogyvoje Я думаю, вы можете, вместо версии просто укажите прямо на мою ветку. PR был объединен, но новая версия response-dnd еще не выпущена, поэтому вы не можете получить ее напрямую из response-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/) и постарайтесь предоставить любую значимую информацию (например, ОС, версию response-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 НЕТ Сборка 14393

Протестировано в Chrome: версия 55.0.2883.87 (64-бит) (в Linux / Mint 18) и отлично работает ...

@rogyvoje спасибо! Я посмотрю позже, посмотрим, вижу ли я проблему в моей виртуальной машине Windows 7, иначе я попробую другую виртуальную машину с Windows 10. Спасибо!

привет @rogyvoje, я пробовал ваш репозиторий прямо в последней версии Chrome, поскольку вы сказали, что у вас была такая же проблема (версия 60.0.3112.78 (официальная сборка) (64-разрядная версия) - Windows 10 PRO), но я не вижу любая ошибка.

это ведь ожидаемый результат?

Есть ли какие-либо другие шаги для воспроизведения вашей проблемы?

Я установил зависимости с помощью [email protected] (вместо использования yarn ), и для записи вот точные версии установленных зависимостей:

ПРИМЕЧАНИЕ: я использую виртуальную машину Windows 10 PRO (потому что моя основная ОС - OSX El Capitan, в которой проблема с хромом не существует)

и тот же результат со всеми отключенными расширениями Chrome:

@rogyvoje Я только что прочитал ваши предыдущие комментарии и теперь могу воспроизвести проблему, как вы говорите, первое перетаскивание работает, но если кто-то пытается перетащить второй раз, появляется ошибка Cannot call hover after drop .

Спасибо за репозиторий, я постараюсь погрузиться в проблему и найти решение, которое сделает всех счастливыми.

похоже, что ошибка подтверждена: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS % 20Изменено

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 для Mac), поэтому он не работает везде при использовании Chrome (> = 59) и при использовании iframe 😂

@bjrmatos здорово, рад, что вы удачно его воспроизвели 😄
просто не уверен, что будет дальше, ждать ли нам Chrome 61? 😂

просто не уверен, что будет дальше, ждать ли нам Chrome 61?

возможно, в любом случае я пытаюсь найти хороший патч, который заставит response-dnd работать в Chrome 59, 60, поэтому позже я опубликую здесь больше обновлений 👍

Думаю, это решает проблему. https://github.com/react-dnd/react-dnd/pull/820
Он уже объединен, но не выпущен.

Есть новости по этому поводу?
У меня все еще возникают проблемы с последней версией Chrome ...

@ ms88privat # 820 разрешает исключение, но не исходную проблему, которая в Chrome (я использую 67) никогда не вызывается source.endDrag при рендеринге iframe.

До версии 3.0 мы использовали обходной путь, предоставляемый @ 0rvar , но с более строгими типами TS невозможно переопределить методы экземпляра или методы частного класса.

Вы можете воспроизвести его, добавив endDrag в Video.js в тестовом репозитории @ rogyvoje.

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

При первом перетаскивании endDrag не вызывается для Chrome.

он также зависает, когда вы включаете iframe на страницу внутри chrome (с 59 по текущий). Исправление @ 0rvar также работает в этом случае

Теперь это исправлено в версии Chrome 72, которая была выпущена вчера.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.