¿Cómo puedo establecer el ancho mínimo para no permitir arrastrar a la izquierda sin ancho en la siguiente muestra?
const App = () => { const [initialPos, setInitialPos] = React.useState(null); const [initialSize, setInitialSize] = React.useState(null); const initial = (e) => { let resizable = document.getElementById('Resizable'); setInitialPos(e.clientX); setInitialSize(resizable.offsetWidth); } const resize = (e) => { let resizable = document.getElementById('Resizable'); resizable.style.width = `${parseInt(initialSize) + parseInt(e.clientX - initialPos)}px`; } return( <div className = 'Block'> <div id = 'Resizable'/> <div id = 'Draggable' draggable = 'true' onDragStart = {initial} onDrag = {resize} /> </div> ); } ReactDOM.render(<App/>, document.getElementById('root'));https://codepen.io/erikmartinjordan/pen/dyMEXJb?editors=0110
Puede ajustar su función de cambio de tamaño para limitar el ancho.
const resize = (e) => { let resizable = document.getElementById('Resizable'); let newWidth = parseInt(initialSize) + parseInt(e.clientX - initialPos); if (newWidth < 200) { newWidth = 200; } resizable.style.width = `${newWidth}px`; }Puede configurar 200 para que sea cualquier ancho máximo. ¡Simplemente no olvide cambiar los dos valores de 200, o incluso mejor, haga una variable para ello!
Esto le permitirá mover el extremo hacia la izquierda o hacia la derecha con un máximo de 200 píxeles.
const initial = (e) => { let resizable = document.getElementById("Resizable"); // lock the start position if (initialPos == null) { setInitialPos(e.clientX); setInitialSize(resizable.offsetWidth); } }; const resize = (e) => { let resizable = document.getElementById("Resizable"); // check for the absolute distance from the start point if (Math.abs(e.clientX - initialPos) < 200) { resizable.style.width = `${ parseInt(initialSize) + parseInt(e.clientX - initialPos) }px`; } };