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

作成日 2016å¹´03月18日  Â·  22コメント  Â·  ソース: react-dnd/react-dnd

Chromeのドラッグ操作の開始時に一時的にポップアップする緑色のプラス記号を取り除く方法を誰かが理解しましたか?

dnd quicktime player today at 8 24 18 pm

最も参考になるコメント

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

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

全てのコメント22件

+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ではこの動作は発生しません。

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の下の写真は問題を示しています

greenplus

screen shot 2018-08-01 at 12 57 15 pm

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

+1

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

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

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

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

このページは役に立ちましたか?
0 / 5 - 0 評価