React-dnd: 質問：角の丸い要素をドラッグするときに正方形の角を透明にするにはどうすればよいですか？

DragPreviewにCustomDragLayerを使用していますか？ 四角い角が現れる
丸いものと一緒に？

スクリーンショットは、何が起こっているかを確認するのに役立ちます。

水、2017年6月7日には午後12時53分nottoseethesunで[email protected]書きました：

角が丸いドラッグ可能な要素があり、ドラッグすると、
要素の四角い角が薄い灰色で表示され、異なる
要素の割り当てられた背景色から。

それをなくしたいので、角が丸い要素だけ
現れます。

これをオフにするためにできることはありますか？ 幽霊など
適用されている可能性のある画像？

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/react-dnd/react-dnd/issues/788 、またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
。

>>

よろしく、
ガガン

ありがとう- CustomDragLayerを使用していません; すべてが明白です。

スクリーンショットでは、残念ながらそれは不可能ですが、より適切に説明できます。ドラッグ可能なものは、角が丸い（境界半径10px）、各辺が約1インチの正方形のdivです。 ドラッグ可能な場合、ドラッグすると、すべての点で正常に見えます（角が丸く、適切な色があります）。ただし、要素に境界半径の丸みがない場合と同様に、丸みのない4つ

Chromeがdivのスナップショットを作成し、それをメモリに保持しているようです。 以前、これで実際にendDrag問題があり、デスクトップのWebブラウザーの外側をクリックすると、説明したとおりにドラッグ可能ファイルが表示されました。

WebkitTapHighlightColor （React識別子形式）をtransparentに設定しようとしましたが、修正されませんでした。

それは奇妙だ。 CustomPreviewを使用していない場合は、まったく同じです
ドラッグを開始する前にレンダリングされるものはプレビューである必要があります（
要素のブラウザスナップショットに依存する）

で説明されている以外のことをしているのかどうかを確認できますか
この例-
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ？

このリポジトリのクローンを作成し、この例にborderRadiusを追加すると、次のように表示されます。
それは完全にうまく機能しています！

水、2017年6月7日には午前9時19分nottoseethesunで[email protected]書きました：

ありがとう-CustomDragLayerを使用していません。 すべてが明白です。

スクリーンショットでは、残念ながらそれは不可能ですが、私は説明することができます
より良い：ドラッグ可能なものは、各辺が約1インチの正方形のdivであり、
丸みを帯びた角（境界半径10px）。 ドラッグ可能なルックスをドラッグすると
すべての点で正常です（まだ角が丸く、適切な色があります）
1つのことを除いて：4つの丸みのない角のそれぞれは次のように表示されます
要素に境界半径の丸めがない場合と同じように、
丸められていない部分の色が親の色であることを除いて
ドラッグ可能な要素（ドラッグ元の親要素）。 そう
Chromeブラウザのみで、丸みを帯びた各コーナーが不幸にも付随します（
FirefoxまたはSafari）、表面の残りの部分である小さな「帽子」
角が丸くない場合と同じように、divの領域。

Chromeがdivのスナップショットを作成し、それを保持しているようです。
メモリー。 これで以前、私は実際にendDragで問題が発生しました。
デスクトップのWebブラウザの外側をクリックすると、
説明どおりにドラッグ可能。

—
あなたがコメントしたのであなたはこれを受け取っています。

このメールに直接返信し、GitHubで表示してください
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
。

>>

よろしく、
ガガン

ありがとう-私はその例でborder-radiusを試しましたが、確かにあなたは正しいです。 ただし、正しく見える理由は、作業領域全体が同じ背景色であるためです。 Chromeのhtml要素のネイティブゴースト画像を別の背景色にドラッグすると、それらのコーナーが表示されます。 私の場合、私はそのような状況にあります。 ゴーストイメージを指定することで、問題なく回避できます。

この同じ問題に遭遇しました。 最終的に、ドラッグプレビューとして必要なノードにtransform: 'translate(0, 0)'を追加することで、問題を修正することができました。 このページからいくつかの洞察を得ました： https ：

@douweknookありがとう

@douweknook素晴らしいソリューション！

単純なcssの実装は次のようになります。

    .sortable-chosen {
        transform: translate(0, 0);
    }

.sortable-chosenをsortable要素クラスにチェーンして、スタイルがグローバルに適用されないようにします。 たとえば、並べ替え可能な要素クラスが「item」の場合は、代わりに.item.sortable-chosenを使用してください。

@douweknook YAY .......ありがとう、それは純粋なjavaScriptタンクでも問題を解決しました

@douweknookあなたは紳士であり学者です。 これは境界線の半径の問題を修正するために機能しましたが、それでもボックスの影を切り落とします。 注：これはFirefoxで正しく機能します。

興味のある人のために、これについて別の問題を作成しました。 https://github.com/react-dnd/react-dnd/issues/2762