Cómo utilizar la API HTML de arrastrar y soltar en React

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • ¡Registro!

  • Índice
    1. Los dragenter, dragleave, dragover, Y dropEventos
    2. Eventos de arrastrar y soltar en React
    3. Gestionar el estado con el useReducergancho
    4. Conclusión
      1. Recursos

    En este tutorial, crearemos un componente de arrastrar y soltar de React para cargar archivos e imágenes. En el proceso, aprenderemos sobre la API HTML de arrastrar y soltar. También aprenderemos a utilizar el gancho useReducer para gestionar el estado en un componente funcional de React.

     

    La API de arrastrar y soltar es una de las características más interesantes de HTML. Nos ayuda a implementar funciones de arrastrar y soltar en los navegadores web.

    En el contexto actual, arrastraremos archivos desde fuera del navegador. Al soltar los archivos, los colocamos en una lista y mostramos sus nombres. Con los archivos en la mano, podríamos realizar alguna otra operación en los archivos, por ejemplo, subirlos a un servidor en la nube.

    En este tutorial, nos centraremos en cómo implementar la acción de arrastrar y soltar en una aplicación React. Si lo que necesita es una JavaScriptimplementación sencilla, tal vez le gustaría leer primero " Cómo crear un cargador de archivos de arrastrar y soltar con Vanilla JavaScript ", un excelente tutorial escrito por Joseph Zimmerman no hace mucho.

    Los dragenter, dragleave, dragover, Y dropEventos

    Hay ocho eventos diferentes de arrastrar y soltar. Cada uno se activa en una etapa diferente de la operación de arrastrar y soltar. En este tutorial, nos centraremos en los cuatro que se activan cuando un elemento se deja caer en una zona de caída: dragenter, y .dragleavedragoverdrop

    1. El dragenterevento se activa cuando un elemento arrastrado ingresa a un destino de colocación válido.
    2. El dragleaveevento se activa cuando un elemento arrastrado deja un destino de colocación válido.
    3. El dragoverevento se activa cuando un elemento arrastrado se arrastra sobre un destino de colocación válido. (Se dispara cada pocos cientos de milisegundos).
    4. El dropevento se activa cuando un elemento cae en un destino de colocación válido, es decir, se arrastra y se suelta.

    Podemos convertir cualquier elemento HTML en un destino de colocación válido definiendo los atributos del controlador de eventos ondragovery ondrop.

    Puede aprender todo sobre los ocho eventos en los documentos web de MDN .

    Eventos de arrastrar y soltar en React

    Para comenzar, clone el repositorio del tutorial desde esta URL:

    https://github.com/chidimo/react-dnd.git

    Consulta la 01-startsucursal. Asegúrate de haberlo yarninstalado también. Puede obtenerlo en Yarnpkg.com .

    Pero si lo prefieres, crea un nuevo proyecto de React y reemplaza el contenido de App.js con el siguiente código:

    import React from 'react';import './App.css';function App() { return ( div className="App" h1React drag-and-drop component/h1 /div );}export default App;

    Además, reemplace el contenido de App.css con el siguiente estilo CSS:

    .App { margin: 2rem; text-align: center;}h1 { color: #07F;}.drag-drop-zone { padding: 2rem; text-align: center; background: #07F; border-radius: 0.5rem; box-shadow: 5px 5px 10px #C0C0C0;}.drag-drop-zone p { color: #FFF;}.drag-drop-zone.inside-drag-area { opacity: 0.7;}.dropped-files li { color: #07F; padding: 3px; text-align: left; font-weight: bold;}

    Si clonaste el repositorio, emite los siguientes comandos (en orden) para iniciar la aplicación:

    yarn # install dependenciesyarn start # start the app

    El siguiente paso es crear un componente de arrastrar y soltar. Cree un archivo DragAndDrop.js dentro de la src/carpeta. Ingrese la siguiente función dentro del archivo:

    import React from 'react';const DragAndDrop = props = { const handleDragEnter = e = { e.preventDefault(); e.stopPropagation(); }; const handleDragLeave = e = { e.preventDefault(); e.stopPropagation(); }; const handleDragOver = e = { e.preventDefault(); e.stopPropagation(); }; const handleDrop = e = { e.preventDefault(); e.stopPropagation(); }; return ( div className={'drag-drop-zone'} onDrop={e = handleDrop(e)} onDragOver={e = handleDragOver(e)} onDragEnter={e = handleDragEnter(e)} onDragLeave={e = handleDragLeave(e)} pDrag files here to upload/p /div );};export default DragAndDrop;

    En la devolución div, hemos definido HTMLlos atributos de nuestro controlador de eventos de enfoque. Puedes ver que la única diferencia con el puro HTMLes la tripa de camello.

    Ahora es divun destino de colocación válido ya que hemos definido los atributos del controlador de eventos onDragOvery onDrop.

    También definimos funciones para manejar esos eventos. Cada una de estas funciones de controlador recibe el objeto de evento como argumento.

    Para cada uno de los controladores de eventos, llamamos preventDefault()para evitar que el navegador ejecute su comportamiento predeterminado. El comportamiento predeterminado del navegador es abrir el archivo soltado. También llamamos stopPropagation()para asegurarnos de que el evento no se propague de los elementos secundarios a los principales.

     

    Importe el DragAndDropcomponente al Appcomponente y preséntelo debajo del encabezado.

    div className="App" h1React drag-and-drop component/h1 DragAndDrop //div

    Ahora vea el componente en el navegador y debería ver algo como la imagen a continuación.

    divpara convertir en una zona de caída ( vista previa grande )

    Si estás siguiendo el repositorio, la rama correspondiente es02-start-dragndrop

    Gestionar el estado con el useReducergancho

    Nuestro siguiente paso será escribir la lógica para cada uno de nuestros controladores de eventos. Antes de hacer eso, debemos considerar cómo pretendemos realizar un seguimiento de los archivos eliminados. Aquí es donde empezamos a pensar en la gestión estatal.

    Realizaremos un seguimiento de los siguientes estados durante la operación de arrastrar y soltar:

    1. dropDepth
      Este será un número entero. Lo usaremos para realizar un seguimiento de cuántos niveles de profundidad nos encontramos en la zona de caída. Más adelante lo explicaré con una ilustración. (¡ Créditos a Egor Egorov por iluminarme esto! )
    2. inDropZone
      Esto será booleano. Usaremos esto para realizar un seguimiento de si estamos dentro de la zona de lanzamiento o no.
    3. FileList
      Esta será una lista. Lo usaremos para realizar un seguimiento de los archivos que se han colocado en la zona de colocación.

    Para manejar estados, React proporciona los ganchos useStatey useReducer. Optaremos por el useReducergancho dado que nos ocuparemos de situaciones en las que un estado depende del estado anterior.

    El useReducergancho acepta un reductor de tipo (state, action) = newStatey devuelve el estado actual emparejado con un dispatchmétodo. Mejores Páginas de Contactos | Opiniones y Análisis 2023

    Puede leer más sobre esto useReducer en los documentos de React .

    Dentro del Appcomponente (antes de la returndeclaración), agregue el siguiente código:

    ...const reducer = (state, action) = { switch (action.type) { case 'SET_DROP_DEPTH': return { ...state, dropDepth: action.dropDepth } case 'SET_IN_DROP_ZONE': return { ...state, inDropZone: action.inDropZone }; case 'ADD_FILE_TO_LIST': return { ...state, fileList: state.fileList.concat(action.files) }; default: return state; }};const [data, dispatch] = React.useReducer( reducer, { dropDepth: 0, inDropZone: false, fileList: [] })...

    El useReducergancho acepta dos argumentos: un reductor y un estado inicial. Devuelve el estado actual y una dispatchfunción con la que actualizar el estado. El estado se actualiza enviando una acción que contiene typeuna carga útil opcional. La actualización realizada en el estado del componente depende de lo que se devuelve de la declaración del caso como resultado del tipo de acción. (Tenga en cuenta aquí que nuestro estado inicial es un object.)

    Para cada una de las variables de estado, definimos una declaración de caso correspondiente para actualizarla. La actualización se realiza invocando la dispatchfunción devuelta por useReducer.

     

    Ahora pase datay dispatchen cuanto propsal DragAndDropcomponente que tiene en su archivo App.js :

    DragAndDrop data={data} dispatch={dispatch} /

    En la parte superior del DragAndDropcomponente, podemos acceder a ambos valores desde props.

    const { data, dispatch } = props;

    Si estás siguiendo el repositorio, la rama correspondiente es 03-define-reducers.

    Terminemos la lógica de nuestros controladores de eventos. Tenga en cuenta que los puntos suspensivos representan las dos líneas:

    e.preventDefault()e.stopPropagation()const handleDragEnter = e = { ... dispatch({ type: 'SET_DROP_DEPTH', dropDepth: data.dropDepth + 1 });};const handleDragLeave = e = { ... dispatch({ type: 'SET_DROP_DEPTH', dropDepth: data.dropDepth - 1 }); if (data.dropDepth 0) return dispatch({ type: 'SET_IN_DROP_ZONE', inDropZone: false })};

    En la siguiente ilustración, hemos anidado las zonas de colocación A y B. A es nuestra zona de interés. Aquí es donde queremos escuchar los eventos de arrastrar y soltar.

    Una ilustración de los eventos ondragentery ondragleave( vista previa grande )

    Al arrastrar a una zona de caída, cada vez que alcanzamos un límite, ondragenterse activa el evento. Esto sucede en los límites A-iny B-in. Como estamos entrando en la zona, incrementamos dropDepth.

    Del mismo modo, al salir de una zona de caída, cada vez que alcanzamos un límite, ondragleavese activa el evento. Esto sucede en los límites A-outy B-out. Como salimos de la zona, disminuimos el valor de dropDepth. Observe que no lo establecemos inDropZoneen falseel límite B-out. Es por eso que tenemos esta línea para verificar dropDepth y regresar de la función dropDepthmayor que 0.

    if (data.dropDepth 0) return

    Esto se debe a que, aunque ondragleavese active el evento, todavía estamos dentro de la zona A. Solo después de haber alcanzado A-out, y dropDepthes ahora 0que nos configuramos inDropZoneen false. En este punto, hemos abandonado todas las zonas de descenso.

    const handleDragOver = e = { ... e.dataTransfer.dropEffect = 'copy'; dispatch({ type: 'SET_IN_DROP_ZONE', inDropZone: true });};

    Cada vez que se activa este evento, lo configuramos inDropZoneen true. Esto nos dice que estamos dentro de la zona de caída. También configuramos el dropEffectobjeto dataTransferen copy. En una Mac, esto tiene el efecto de mostrar un signo más verde al arrastrar un elemento en la zona de colocación.

    const handleDrop = e = { ... let files = [...e.dataTransfer.files]; if (files files.length 0) { const existingFiles = data.fileList.map(f = f.name) files = files.filter(f = !existingFiles.includes(f.name)) dispatch({ type: 'ADD_FILE_TO_LIST', files }); e.dataTransfer.clearData(); dispatch({ type: 'SET_DROP_DEPTH', dropDepth: 0 }); dispatch({ type: 'SET_IN_DROP_ZONE', inDropZone: false }); }};

    Podemos acceder a los archivos caídos con e.dataTransfer.files. El valor es un objeto similar a una matriz, por lo que usamos la sintaxis de distribución de matriz para convertirlo en una JavaScriptmatriz.

     

    Ahora necesitamos verificar si hay al menos un archivo antes de intentar agregarlo a nuestra matriz de archivos. También nos aseguramos de no incluir archivos que ya estén en nuestro archivo fileList. El dataTransferobjeto se borra en preparación para la siguiente operación de arrastrar y soltar. También restablecemos los valores de dropDepthy inDropZone.

    Actualice el classNamedel divcomponente DragAndDrop. Esto cambiará condicionalmente el classNamede divdependiendo del valor de data.inDropZone.

    div className={data.inDropZone ? 'drag-drop-zone inside-drag-area' : 'drag-drop-zone'} ... pDrag files here to upload/p/div

    Representa la lista de archivos en App.js mapeando a través de data.fileList.

    div className="App" h1React drag-and-drop component/h1 DragAndDrop data={data} dispatch={dispatch} / ol className="dropped-files" {data.fileList.map(f = { return ( li key={f.name}{f.name}/li ) })} /ol/div

    Ahora intenta arrastrar y soltar algunos archivos en la zona de colocación. Verás que a medida que ingresamos a la zona de caída, el fondo se vuelve menos opaco porque la inside-drag-areaclase está activada.

    Cuando libera los archivos dentro de la zona de colocación, verá los nombres de los archivos enumerados debajo de la zona de colocación:

    Zona de colocación que muestra baja opacidad durante el arrastre ( vista previa grande )
    Una lista de archivos colocados en la zona de colocación ( vista previa grande )

    La versión completa de este tutorial está en la 04-finish-handlersrama.

    Conclusión

    Hemos visto cómo manejar la carga de archivos en React usando la HTMLAPI de arrastrar y soltar. También aprendimos cómo gestionar el estado con el useReducergancho. Podríamos ampliar la handleDropfunción del archivo. Por ejemplo, podríamos agregar otra marca para limitar el tamaño de los archivos si quisiéramos. Esto puede ocurrir antes o después de la verificación de archivos existentes. También podríamos hacer que se pueda hacer clic en la zona de colocación sin afectar la funcionalidad de arrastrar y soltar.

    Recursos

    • " Referencia de la API de Hooks:useReducer ", React Docs
    • “ API HTML de arrastrar y soltar ”, documentos web de MDN
    • “ Ejemplos de desarrollo web y XML utilizando DOM ”, documentos web de MDN
    • " Cómo crear un cargador de archivos de arrastrar y soltar con Vanilla JavaScript ", Joseph Zimmerman, Smashing Magazine
    • “ Carga de archivos simple con arrastrar y soltar en React ”, Egor Egorov, Medium

    (ra, ks, il)Explora más en

    • API
    • Reaccionar
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo utilizar la API HTML de arrastrar y soltar en React

    Cómo utilizar la API HTML de arrastrar y soltar en React

    Implemente rápidamente. Implementar inteligentemente ¡Registro! Índice Los dragenter, dragleave, dragov

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-utilizar-la-api-html-de-arrastrar-y-soltar-en-react-1014-0.jpg

    2024-05-21

     

    Cómo utilizar la API HTML de arrastrar y soltar en React
    Cómo utilizar la API HTML de arrastrar y soltar en React

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20