React-dnd: Pregunta: ¿Cómo hacer transparentes las esquinas cuadradas al arrastrar un elemento de esquina redondeada?

¿Está utilizando CustomDragLayer para DragPreview? Aparecen esquinas cuadradas
junto con los más redondos?

Una captura de pantalla debería ayudar a ver lo que está sucediendo.

El miércoles 7 de junio de 2017 a las 00:53 nottoseethesun [email protected] escribió:

Tengo un elemento que se puede arrastrar con esquinas redondeadas, y cuando se arrastra,
las esquinas cuadradas del elemento se muestran en un color gris claro, diferente
del color de fondo asignado del elemento.

Me gustaría que desapareciera, así que solo el elemento con sus esquinas redondeadas
aparece.

¿Hay algo que se pueda hacer para desactivar esto? Como con un fantasma
imagen que se puede estar aplicando?

-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/react-dnd/react-dnd/issues/788 , o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

Saludos,
Gagan

Gracias - no usar CustomDragLayer ; todo es sencillo.

En la captura de pantalla, desafortunadamente no es posible, pero puedo describirlo mejor: el elemento que se puede arrastrar es un div cuadrado de aproximadamente una pulgada en cada lado, con esquinas redondeadas (radio de borde de 10 px). El arrastrable, cuando se arrastra, parece normal en todos los aspectos (todavía tiene sus esquinas redondeadas y el color adecuado) excepto por una cosa: cada una de las cuatro esquinas no redondeadas aparece también, como lo haría si no hubiera redondeo del radio del borde en el elemento, excepto que el color de la parte no redondeada es el del elemento principal del elemento que se puede arrastrar (el elemento principal desde donde se arrastró). Por lo tanto, cada esquina redondeada está acompañada, lamentablemente, solo en el navegador Chrome (no en Firefox o Safari), con un pequeño "sombrero" que es el resto del área de la superficie del div como lo sería sin las esquinas redondeadas.

Es casi como si Chrome estuviera tomando una instantánea del div y lo mantuviera en la memoria. Anteriormente con esto, tuve un problema con endDrag y cuando hice clic fuera del navegador web en el escritorio, pude ver el arrastrable tal como se describe.

Intenté configurar WebkitTapHighlightColor (formato de identificador de reacción) en transparent , pero eso no solucionó el problema.

Eso es extraño. Si no está utilizando CustomPreview, entonces exactamente lo mismo
Lo renderizado antes de comenzar a arrastrar debería ser la vista previa (como lo haremos
dependerá de la instantánea del navegador del elemento)

¿Podría comprobar si está haciendo algo más de lo que se describe en
este ejemplo -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Si clona este repositorio y agrega un borderRadius a este ejemplo, verá
¡Funciona perfectamente bien!

El miércoles 7 de junio de 2017 a las 09:19 nottoseethesun [email protected] escribió:

Gracias, no utilizo CustomDragLayer; todo es sencillo.

En la captura de pantalla, desafortunadamente no es posible, pero puedo describir
mejor: el arrastrable es un div cuadrado de aproximadamente una pulgada en cada lado, con
esquinas redondeadas (radio del borde 10px). El arrastrable, cuando se arrastra se ve
normal en todos los aspectos (todavía tiene las esquinas redondeadas y el color adecuado)
excepto por una cosa: cada una de las cuatro esquinas no redondeadas aparece como
bueno, como lo harían si no hubiera redondeo de radio de borde en el elemento,
excepto que el color de la parte no redondeada es el del padre
elemento del arrastrable (el elemento padre desde donde se arrastró). Entonces
cada esquina redondeada está desafortunadamente acompañada, solo en el navegador Chrome (no
Firefox o Safari), con un pequeño "sombrero" que es el resto de la superficie
área del div como sería sin las esquinas redondeadas.

Es casi como si Chrome estuviera tomando una instantánea del div y manteniéndolo en
memoria. Anteriormente con esto, tuve un problema con endDrag y cuando
Hice clic fuera del navegador web en el escritorio, pude ver el
arrastrable tal como se describe.

-
Estás recibiendo esto porque hiciste un comentario.

Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

Saludos,
Gagan

Gracias, probé el border-radius en ese ejemplo y, de hecho, tienes razón. Sin embargo, la razón por la que parece correcto es porque toda el área de trabajo tiene el mismo color de fondo. Una vez que una imagen fantasma nativa de un elemento html en Chrome se arrastra a un color de fondo diferente, esas esquinas aparecen. En mi caso sí tengo esa situación. Sin embargo, se puede solucionar con éxito especificando una imagen fantasma.

Me encontré con este mismo problema. Finalmente logré arreglarlo agregando transform: 'translate(0, 0)' al nodo que quería como mi vista previa de arrastre. Obtuve algunas ideas de esta página: https://kryogenix.org/code/browser/custom-drag-image.html, ya que muestra ejemplos de dónde están las esquinas y hacia dónde se han ido.

@douweknook gracias por esto. Encontrar una solución ha llevado una cantidad considerable de tiempo.

@douweknook ¡ increíble solución!

Una implementación de CSS simple se vería así:

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

Encadenaría el .sortable-elegido a su clase de elemento ordenable para asegurarme de que el estilo no se aplique globalmente. Por ejemplo, si su clase de elemento clasificable es "elemento", utilice .item.sortable-selected en su lugar.

@douweknook YAY ....... gracias, resolvió el problema incluso en javaScript puro.

@douweknook Eres un caballero y un erudito. Esto funcionó para solucionar el problema del radio del borde, pero aún recorta la sombra del cuadro. Nota: esto funciona correctamente en Firefox.

Creé una edición separada para esto, para cualquier persona interesada. https://github.com/react-dnd/react-dnd/issues/2762