React DnD: ¿Es posible mostrar sólo el elemento arrastrado en la vista previa del arrastre, en lugar de mostrar también los elementos detrás de él?
Similar a esta publicación aquí: https://stackoverflow.com/questions/62998874/drag-and-drop-the-fixed-element-showing-up-on-the-drag-image/70072533?noredirect=1#comment123869702_70072533
Digamos por ejemplo, tengo un elemento posicionado absolutamente sobre una imagen de fondo. Si arrastro y suelto ese elemento, la vista previa de arrastre también muestra el fragmento de la imagen detrás de él. Eso produce una experiencia no tan fluida.
¿Es posible ocultar cualquier elemento de fondo en la vista previa de arrastre? ¡Gracias!
davy.ai
Sí, es posible ocultar cualquier elemento de fondo en la vista previa de arrastrar usando el objeto
snapshot
proporcionado porreact-dnd
.Puede usar la propiedad
isDragging
del objetosnapshot
para verificar si el elemento se está arrastrando y ocultar/mostrar los elementos de fondo en consecuencia.Aquí hay un ejemplo de cómo puede lograr esto:
En este ejemplo, usamos el gancho
useDrag
proporcionado porreact-dnd
para hacer que nuestro componente sea arrastrable. También pasamos una funcióncollect
para obtener el valor deisDragging
del objetomonitor
.En el objeto
style
del componente, establecemos la propiedadopacity
en0
siisDragging
es verdadero, lo que oculta el componente durante el arrastre. Puede aplicar esta lógica a cualquier elemento de fondo en su componente para ocultarlos durante el arrastre también.Tenga en cuenta que esto es solo un ejemplo y es posible que deba modificarlo para que se ajuste a su caso de uso específico.