React-dnd: Question : Comment rendre les coins carrés transparents lors du déplacement d'un élément à coins arrondis ?

Utilisez-vous un CustomDragLayer pour le DragPreview ? Des coins carrés apparaissent
avec des plus ronds ?

Une capture d'écran devrait aider à voir ce qui se passe.

Le mercredi 7 juin 2017 à 00:53 nottoseethesun [email protected] a écrit :

J'ai un élément déplaçable avec des coins arrondis, et quand il est déplacé,
les coins carrés de l'élément apparaissent dans une couleur gris clair, différente
à partir de la couleur d'arrière-plan attribuée à l'élément.

J'aimerais que ça s'en aille, donc juste l'élément avec ses coins arrondis
révéler.

Y a-t-il quelque chose qui peut être fait pour désactiver cela? Comme avec un fantôme
image qui peut être appliquée?

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/react-dnd/react-dnd/issues/788 , ou coupez le fil de discussion
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Salutations,
Gaga

Merci - ne pas utiliser CustomDragLayer ; tout est clair.

Sur la capture d'écran, pas possible là-dessus malheureusement mais je peux décrire mieux : Le déplaçable est un div carré d'environ un pouce de chaque côté, avec des coins arrondis (rayon de bordure 10px). Le déplaçable, lorsqu'il est déplacé, semble normal à tous égards (il a toujours ses coins arrondis et sa couleur appropriée) à une exception près : chacun des quatre coins non arrondis apparaît également, comme ils le feraient s'il n'y avait pas d'arrondi de rayon de bordure sur l'élément, sauf que la couleur de la partie non arrondie est celle de l'élément parent du déplaçable (l'élément parent d'où il a été glissé). Ainsi, chaque coin arrondi est malheureusement accompagné, sur navigateur Chrome uniquement (pas Firefox ou Safari), d'un petit "chapeau" qui est le reste de la surface du div comme il le serait sans les coins arrondis.

C'est presque comme si Chrome prenait un instantané du div et le gardait en mémoire. Plus tôt avec cela, j'ai eu un problème avec endDrag et lorsque j'ai cliqué en dehors du navigateur Web sur le bureau, je pouvais voir le déplaçable comme décrit.

J'ai essayé de définir WebkitTapHighlightColor (format d'identifiant React) sur transparent , mais cela n'a pas résolu le problème.

C'est étrange. Si vous n'utilisez pas un aperçu personnalisé, alors exactement le même
la chose rendue avant de commencer à faire glisser devrait être l'aperçu (comme nous le ferons
dépendre de l'instantané du navigateur de l'élément)

Pourriez-vous vérifier si vous faites autre chose que ce qui est décrit dans
cet exemple -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Si vous clonez ce référentiel et ajoutez un borderRadius à cet exemple, vous verrez
ça marche parfaitement bien !

Le mercredi 7 juin 2017 à 09:19 nottoseethesun [email protected] a écrit :

Merci - ne pas utiliser CustomDragLayer ; tout est clair.

Sur la capture d'écran, pas possible là-dessus malheureusement mais je peux décrire
mieux : le déplaçable est un div carré d'environ un pouce de chaque côté, avec
coins arrondis (rayon de bordure 10px). Le déplaçable, lorsqu'il est traîné regarde
normal à tous égards (il a toujours ses coins arrondis et sa couleur appropriée)
sauf pour une chose : chacun des quatre coins non arrondis apparaît comme
eh bien, comme ils le feraient s'il n'y avait pas d'arrondi de rayon de bordure sur l'élément,
sauf que la couleur de la partie non arrondie est celle du parent
élément du déplaçable (l'élément parent d'où il a été glissé). Donc
chaque coin arrondi est mal accompagné, sur navigateur Chrome uniquement (non
Firefox ou Safari), avec un petit "chapeau" qui fait le reste de la surface
zone de la div telle qu'elle serait sans les coins arrondis.

C'est presque comme si Chrome prenait un instantané de la div et la maintenait dans
Mémoire. Plus tôt avec cela, j'ai eu un problème avec endDrag et quand
J'ai cliqué en dehors du navigateur Web sur le bureau, je pouvais voir le
déplaçable comme décrit.

-
Vous recevez ceci parce que vous avez commenté.

Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Salutations,
Gaga

Merci - j'ai essayé le border-radius sur cet exemple et en effet vous avez raison. Cependant, la raison pour laquelle cela semble correct est que toute la zone de travail a la même couleur d'arrière-plan. Une fois qu'une image fantôme native d'un élément html dans Chrome est glissée sur une couleur d'arrière-plan différente, ces coins s'affichent. Dans mon cas, j'ai cette situation. Il peut être contourné avec succès en spécifiant une image fantôme.

Couru dans ce même problème. J'ai finalement réussi à le réparer en ajoutant transform: 'translate(0, 0)' au nœud que je voulais comme aperçu de glisser. J'ai obtenu quelques informations sur cette page : https://kryogenix.org/code/browser/custom-drag-image.html car elle montre des exemples où les coins sont là et où ils sont partis.

@douweknook merci pour cela. Trouver une solution a pris un temps considérable.

@douweknook solution géniale!

Une implémentation CSS simple ressemblerait à quelque chose comme :

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

Je chaînerais le .sortable-chosen à votre classe d'éléments triables pour m'assurer que le style n'est pas appliqué globalement. Par exemple, si votre classe d'éléments triables est "item", utilisez plutôt .item.sortable-chosen !

@douweknook YAY ....... merci, cela a résolu le problème même en pur javaScript tank vous

@douweknook Vous êtes un gentleman et un érudit. Cela a fonctionné pour résoudre le problème du rayon de la bordure, mais il recadre toujours l'ombre de la boîte. Remarque : cela fonctionne correctement dans Firefox.

J'ai créé un problème séparé pour cela, pour toute personne intéressée. https://github.com/react-dnd/react-dnd/issues/2762