React-dnd: Chromeの緑色のプラス記号

+1

この問題は、MacのChrome 49、またはWindowsのChrome 49では再現できません： http ：

これはまだあなたのために起こっていますか？ 使用しているChromeのバージョンとOSは何ですか？

また、 http ： か？

MacのChrome49（まだ10.10）で、すべての例で問題が発生しています。 ドラッグを開始すると、カーソルが緑色のプラス記号に変わります（通常はcursor: copy表示されます）。 その後、「移動」カーソルになります。

@globexdesigns （Chrome 49、OSX 10.11）をリンクした例では、これを散発的に再現できます。期待どおりに動作する前に、

私の推測では、Reactのバッチレンダリングサイクルとブラウザのdnd実装の間の短い遅延（この場合は修正できる可能性があります）またはChromeのバグのいずれかです。 私は他のブラウザで遊んで（誰かが私を殴らない限り）、そこで再現できるかどうかを確認します。

Chrome 49 OSX 10.11.4でも同じことがわかります。一瞬表示された後、通常の状態に戻ります。 SafariまたはFirefoxではこの動作は発生しません。

@EvNaverniouk Chrome49とます。 -dnd / examples-customize-drop-effects.html

OS X10.11.2のChrome50でもこの問題が発生しています。

OS X10.10.1でこのChrome51も表示されます

これは、OSX10.11.4のChromeバージョン51でも見られます。

編集：ドラッグレイヤーを実装するいくつかの機能を追加し、connectDragPreviewとgetEmptyImage（）を使用してコードを適切に含めた後、問題は今のところ解消されているようです。

これは、React DnDや他のライブラリ、さらにはドラッグ可能な生のHTML5でもランダムに見られます。 私の推測では、ドラッグスタートでeffectAllowedを設定しないことが関係していると思います。

これに関する更新はありますか？ Chrome 53 OSX10.10.5で同じ問題に直面している

Chrome 54.0.2840.71 10.11.6と同じものが表示されますが、更新はありますか？

+1

{dropEffect: 'copy'}を使用すると、問題がマスクされます（緑色のプラスが常に表示されるようにします）。 しかし、それを適切に修正しません。

さらに、 {dropEffect: 'move'}は、カーソルを4点の十字線にすることに成功していないようです。

Chromeバージョン：55.0.2883.95（公式ビルド）（64ビット）

この問題はこのライブラリの機能ではないようであるため、この問題を解決します。

@fredguestこれに対する解決策を見つけたことがありますか？

@Yamikamisama悲しいことにいいえ。

canDrop関数がfalseを返すまで、緑色のプラスボタンは表示されません。その後、表示されます。

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

これは私にとってクロームでうまくいきました。 dataTransferオブジェクトにアクセスできるのは、「dragstart」イベントと「dragend」イベントだけです。

これは私を助けませんでした

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

cursor: 'grab'とcursor: 'grabbing'間の瞬間にのみ発生します
残念ながらgif形式では表示されませんが、gifの下の写真は問題を示しています

私もこの問題を経験しています。 Chromeのバグのようです。

+1

+1クロームバージョン84.0.4147.89

編集：これは、次のコードを使用してプレビュー画像がない場合にのみ発生します。

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

プレビューを実装すると、この問題が解決します