De hecho, tengo una lista de arrastrar y soltar de BaseWeb https://baseweb.design/components/dnd-list/ , y en lugar de tener cadenas como muestra el ejemplo, tengo componentes para un blog, como una sección de texto, algunos entradas, etc... Uso esta lista para reordenar mis componentes fácilmente, pero tengo un problema, si quiero hacer clic para ingresar a mi entrada de texto, arrastro mi componente y no entro.
Estoy usando React-Quill para el editor de texto.
Aquí está mi código para la lista:
initialState={{ items: componentsArray }} onChange={({oldIndex, newIndex}) => setComponentsArray(newIndex === -1 ? arrayRemove(componentsArray, oldIndex) : arrayMove(componentsArray, oldIndex, newIndex)) } className="" overrides={{ DragHandle: <FontAwesomeIcon icon={Icons.faLeftRight} />, }} />Intente cancelar el controlador de BaseWeb onmousedown para los elementos que necesita para liberar de arrastre.
import React, { useState, useEffect, useRef } from 'react'; import { List, arrayMove } from 'baseui/dnd-list'; import { StatefulSelect } from 'baseui/select'; import { v4 as uuidv4 } from 'uuid'; const RulesTab = () => { const [items, setItems] = useState([{ id: uuidv4() }, { id: uuidv4() }]); const dndRootRef = useRef(null); useEffect(() => { // override base-web's mousedown event handler dndRootRef.current.addEventListener('mousedown', (el) => { let isFreeOfDrag = false; let currentEl = el.target; // check if the element you clicked is inside the "free-of-drag block" do { if (currentEl.getAttribute('test-id') === 'free-of-drag') { isFreeOfDrag = true; break; } else { currentEl = currentEl.parentElement; } } while (currentEl); // invoke el.stopPropagation(); if the element you clicked is inside the "free-of-drag block" if (isFreeOfDrag) { el.stopPropagation(); } }); }, []); return ( <List items={items.map(({ id }, index) => ( <div style={{ display: 'flex' }} test-id="free-of-drag" key={id}> <StatefulSelect options={[ { label: 'AliceBlue', id: '#F0F8FF' }, { label: 'AntiqueWhite', id: '#FAEBD7' }, ]} placeholder="Select color" /> </div> ))} onChange={({ oldIndex, newIndex }, el) => setItems(arrayMove(items, oldIndex, newIndex))} overrides={{ Root: { props: { ref: dndRootRef, }, }, }} /> ); };