Saltar al contenido

Arrastrar y soltar en los componentes de reacción

Actualmente, el objetivo de lanzamiento permitirá que se deje caer cualquier cosa sobre él, y el cursor de arrastre es siempre el mismo. Estos pueden ser controlados usando los efectos de caída. Los efectos disponibles incluyen copiar, mover, enlazar y cualquier combinación de ellos. El efecto para el objeto que se arrastra se establece usando event.dataTransfer.effectAllowed en el manejador de arrastre de inicio, y el efecto para el objetivo de arrastre se establece usando event.dataTransfer.dropEffect tanto en el manejador de arrastre como en el de entrada de arrastre, onDragEnter. Establecer estas propiedades tendrá el efecto tanto de cambiar el cursor de arrastre como de controlar si un elemento se puede soltar en un objetivo concreto. Ahora extenderemos los componentes para implementar los efectos de arrastre.

Primero, añadiremos un puntal opcional de tipo cadena llamado dropEffect al componente Drag y, en el manejador de arrastre de inicio, estableceremos el efectoAllowed al valor del puntal. Como este puntal será opcional, usaremos la propiedad defaultProps static para darle un valor por defecto de $0027all$0027, lo que significa que soportará los tres efectos. La parte principal del componente de Arrastre se verá ahora así:

Arrastrar y soltar en los componentes de reacción
Arrastrar y soltar en los componentes de reacción
123456789functionstartDrag(ev){ ev.dataTransfer.setData("drag-item", props.dataItem); ev.dataTransfer.effectAllowed= props.dropEffect;}return(<divdraggableonDragStart={startDrag};{props.children}</div>);

jsx

Añadiremos una hélice idéntica al componente DropTarget y ajustaremos el dropEffect al valor de la hélice en el drag enter y drag over handlers. El componente DropTarget se verá ahora así:

1234567891011121314151617functiondragOver(ev){ ev.preventDefault(); ev.dataTransfer.dropEffect= props.dropEffect;}functiondragEnter(ev){ ev.dataTransfer. dropEffect= props.dropEffect;}functiondrop(ev){...}return(<divonDragOver={dragOver}onDragEnter={dragEnter}onDrop={drop};{props.children}</div>);

jsx

Los valores válidos para los efectos de caída son $0027copy$0027, $0027link$0027, $0027move$0027, $0027copyMove$0027, $0027copyLink$0027, $0027linkMove$0027, $0027all$0027 y $0027none$0027. El significado de estos debería ser bastante claro, pero para ayudar a los consumidores de los componentes estos deberían ser declarados como constantes, asegurando así que si el propulsor de dropEffect se establece usando las constantes, entonces definitivamente estamos usando un valor válido. En el código de muestra de esta guía, los valores se declaran en un módulo separado, de esta manera:

12345678exportconstAll="all";exportconstMove="move";exportconstCopy="copy";exportconstLink="link";exportconstCopyOrMove="copyMove";exportconstCopyOrLink="copyLink";exportconstLinkOrMove="linkMove";exportconstNone="none";

javascript

Así que si, por ejemplo, digamos que el propulsor dropEffect en el componente Drag está configurado como dropEffects.Move y en el componente DropTarget dropEffects.Copy se desactivará. Si el DropTarget está configurado como dropEffects.CopyOrMove, entonces el drop estará habilitado.