React-dnd: Frage: Wie mache ich eckige Ecken beim Ziehen eines Elements mit abgerundeten Ecken transparent?

Verwenden Sie einen CustomDragLayer für die DragPreview? Quadratische Ecken erscheinen
zusammen mit runderen?

Ein Screenshot sollte helfen zu sehen, was passiert.

Am Mittwoch, den 7. Juni 2017 um 00:53 Uhr schrieb nottoseethesun [email protected] :

Ich habe ein ziehbares Element mit abgerundeten Ecken, und wenn es gezogen wird,
die quadratischen Ecken des Elements erscheinen in einer hellgrauen Farbe, anders
aus der zugewiesenen Hintergrundfarbe des Elements.

Das würde ich gerne weglassen, also nur das Element mit seinen abgerundeten Ecken
auftaucht.

Gibt es etwas, was man tun kann, um dies auszuschalten? Wie bei einem Geist
Bild, das angewendet werden kann?

—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/react-dnd/react-dnd/issues/788 oder den Thread stummschalten
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Grüße,
Gagan

Danke - nicht CustomDragLayer ; alles ist klar.

Auf dem Screenshot leider nicht möglich, aber ich kann es besser beschreiben: Das Draggable ist ein quadratisches Div von etwa einem Zoll auf jeder Seite mit abgerundeten Ecken (Randradius 10px). Das Draggable sieht beim Ziehen in jeder Hinsicht normal aus (es hat immer noch seine abgerundeten Ecken und die richtige Farbe), mit Ausnahme einer Sache: Jede der vier ungerundeten Ecken erscheint ebenso, als ob es keine Rundung des Randradius auf dem Element gäbe, mit der Ausnahme, dass die Farbe des ungerundeten Teils die des übergeordneten Elements des ziehbaren Elements ist (das übergeordnete Element, aus dem es gezogen wurde). Daher wird jede abgerundete Ecke nur im Chrome-Browser (nicht Firefox oder Safari) unglücklicherweise mit einem kleinen "Hut" begleitet, der den Rest der Oberfläche des Div darstellt, wie er ohne die abgerundeten Ecken wäre.

Es ist fast so, als würde Chrome das Div-Snapshot erstellen und im Speicher halten. Zuvor hatte ich tatsächlich ein Problem mit endDrag und als ich außerhalb des Webbrowsers auf den Desktop klickte, konnte ich das Draggable genau wie beschrieben sehen.

Ich habe versucht, WebkitTapHighlightColor (React-Identifier-Format) auf transparent , aber das hat dies nicht behoben.

Das ist seltsam. Wenn Sie keine CustomPreview verwenden, dann genau dasselbe
Ding, das gerendert wird, bevor Sie mit dem Ziehen beginnen, sollte die Vorschau sein (wie wir es tun werden)
abhängig vom Browser-Snapshot des Elements sein)

Könnten Sie überprüfen, ob Sie etwas anderes tun als das, was in beschrieben ist?
dieses Beispiel -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Wenn Sie dieses Repository klonen und diesem Beispiel einen borderRadius hinzufügen, sehen Sie
es funktioniert einwandfrei!

Am Mittwoch, den 7. Juni 2017 um 09:19 Uhr schrieb nottoseethesun [email protected] :

Danke - CustomDragLayer nicht verwenden; alles ist klar.

Auf dem Screenshot leider nicht möglich aber ich kann es beschreiben
besser: Das Draggable ist ein quadratisches Div von etwa einem Zoll auf jeder Seite, mit
abgerundete Ecken (Randradius 10px). Das ziehbare, wenn es gezogen aussieht
in jeder Hinsicht normal (es hat immer noch seine abgerundeten Ecken und die richtige Farbe)
bis auf eines: Jede der vier ungerundeten Ecken erscheint als
gut, als ob es keine Rundung des Randradius auf dem Element gäbe,
außer dass die Farbe des ungerundeten Teils die des Elternteils ist
Element des ziehbaren Elements (das übergeordnete Element, aus dem es gezogen wurde). So
jede abgerundete Ecke wird leider nur im Chrome-Browser begleitet (nicht
Firefox oder Safari), mit einem kleinen "Hut", der der Rest der Oberfläche ist
Bereich des Div, wie er ohne die abgerundeten Ecken wäre.

Es ist fast so, als ob Chrome das Div-Snapshot erstellt und dieses festhält
Erinnerung. Früher hatte ich damit tatsächlich ein Problem mit endDrag und wann
Ich habe außerhalb des Webbrowsers auf den Desktop geklickt, ich konnte das sehen
fahrbar wie beschrieben.

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.

Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Grüße,
Gagan

Danke - ich habe das border-radius in diesem Beispiel ausprobiert und Sie haben tatsächlich Recht. Der Grund dafür, dass es korrekt aussieht, liegt jedoch darin, dass der gesamte Arbeitsbereich dieselbe Hintergrundfarbe hat. Sobald ein natives Geisterbild eines HTML-Elements in Chrome auf eine andere Hintergrundfarbe gezogen wird, werden diese Ecken angezeigt. In meinem Fall habe ich diese Situation. Es kann jedoch erfolgreich umgangen werden, indem ein Geisterbild angegeben wird.

Bin auf das gleiche Problem gestoßen. Letztendlich konnte es behoben werden, indem transform: 'translate(0, 0)' zu dem Knoten hinzugefügt wurde, den ich als Drag-Vorschau haben wollte. Einige Einblicke habe ich auf dieser Seite erhalten: https://kryogenix.org/code/browser/custom-drag-image.html, da sie Beispiele zeigt, wo die Ecken vorhanden sind und wo sie verschwunden sind.

@douweknook danke dafür. Die Suche nach einer Lösung hat viel Zeit in Anspruch genommen.

@douweknook tolle Lösung!

Eine einfache CSS-Implementierung würde ungefähr so ​​aussehen:

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

Ich würde .sortable-chosen mit Ihrer sortierbaren Elementklasse verketten, um sicherzustellen, dass der Stil nicht global angewendet wird. Wenn Ihre sortierbare Elementklasse beispielsweise "item" ist, verwenden Sie stattdessen .item.sortable-chosen!

@douweknook YAY....... danke, es hat das Problem sogar in reinem Javascript gelöst Tank dir

@douweknook Du bist ein Gentleman und ein Gelehrter. Dies funktionierte, um das Problem mit dem Randradius zu beheben, aber es schneidet immer noch den Kastenschatten ab. Hinweis: Dies funktioniert ordnungsgemäß in Firefox.

Dafür habe ich für alle Interessierten eine eigene Ausgabe erstellt. https://github.com/react-dnd/react-dnd/issues/2762