React-dnd: Зеленый знак плюса в Chrome

+1

Невозможно воспроизвести эту проблему в Chrome 49 на Mac или Chrome 49 на Windows на этой странице: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Это все еще происходит с вами? Какую версию Chrome вы используете и какую ОС?

Кроме того, вы можете управлять поведением курсора, как описано здесь: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

Я вижу проблему во всех примерах в Chrome 49 на Mac (все еще 10.10). В начале перетаскивания курсор меняется на зеленый знак плюса (обычно отображается как cursor: copy ); и затем становится курсором «перемещения».

Я могу воспроизвести это время от времени в примере, который вы связали с @globexdesigns (Chrome 49, OSX 10.11) - он появляется только на долю секунды, прежде чем вести себя должным образом.

Я предполагаю, что это либо небольшая задержка между циклом пакетного рендеринга React и реализацией dnd в браузере (в этом случае мы могли бы исправить это), либо ошибка в Chrome. Я поиграю с другими браузерами (если только кто-нибудь меня не опередит) и посмотрю, смогу ли я получить там репро.

Я вижу то же самое в Chrome 49 OSX 10.11.4 - появляется на долю секунды, а затем возвращается в нормальное состояние. У меня такого поведения не происходит в Safari или Firefox.

@EvNaverniouk Я использую Chrome 49 и OS X 10.11.4, и да, проблема все еще возникает, и да, я вижу значок копии копии, когда ожидалось, в этой ссылке, на которую вы ссылались http://gaearon.github.io/react -dnd / examples-customize-drop-effects.html

Также эта проблема наблюдается в Chrome 50 на OS X 10.11.2.

также вижу этот Chrome 51 в OS X 10.10.1

Я также вижу это в Chrome версии 51 в OSX 10.11.4.

Изменить: после добавления дополнительных функций, реализующих слой перетаскивания и правильного включения кода с использованием connectDragPreview и getEmptyImage (), проблема, похоже, исчезла.

Я случайно видел это в React DnD, а также в других библиотеках, и даже просто перетаскивал необработанный HTML5. Я предполагаю, что это связано с тем, что мы не установили effectAllowed в перетаскивании.

Есть обновления по этому поводу? Столкновение с той же проблемой в Chrome 53 OSX 10.10.5

Видите то же Chrome 54.0.2840.71 10.11.6, обновления есть?

+1

Использование {dropEffect: 'copy'} маскирует проблему (делая зеленый плюс всегда видимым); но не исправляет это должным образом.

Вдобавок кажется, что {dropEffect: 'move'} не удается успешно превратить курсор в четырехконечное перекрестие.

Версия Chrome: 55.0.2883.95 (официальная сборка) (64-разрядная версия)

Закрытие этой проблемы, так как это не похоже на функцию этой библиотеки.

@fredguest Вы когда-нибудь находили решение этой проблемы?

@Yamikamisama, к сожалению, нет.

Зеленая кнопка с плюсом не отображается для меня, пока моя функция canDrop не вернет false, а затем она появится.

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Это сработало для меня на хроме. Просто поместите его в события «dragstart» и «dragend», поскольку только они имеют доступ к объекту dataTransfer.

Это мне не помогло

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

Это происходит только на мгновение между cursor: 'grab' и cursor: 'grabbing'
К сожалению, он не отображается в формате gif, но изображение под гифкой показывает проблему.

У меня тоже возникла эта проблема. Похоже на ошибку в Chrome.

+1

+1 хром версия 84.0.4147.89

edit: это происходит только при использовании следующего кода, чтобы не было изображения предварительного просмотра:

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

реализация предварительного просмотра решает эту проблему