Tengo un contenedor que puede cambiar de tamaño desde right-side y el bottom .
Está cambiando el tamaño correctamente pero en ambos lados, es decir, en height y width al mismo tiempo en una longitud ilimitada.
¿Puede haber una manera de limitar la dirección de cambio de tamaño, ya sea en el lado inferior o en el lado derecho, aumentar o disminuir el tamaño?
El aumento de un solo lado solo es posible cuando se usa 1 condición en if
Aquí está el código:
const panel = document.getElementById("styleChangeOuterTag"); let m_pos; let m_pos1; function resize(e) { const dx = m_pos - ex; const dy = m_pos1 - ey; m_pos = ex; m_pos1 = ey; panel.style.width = (parseInt(getComputedStyle(panel).width) - dx) + "px"; panel.style.height = (parseInt(getComputedStyle(panel).height) - dy) + "px"; } panel.addEventListener("mousedown", function(e) { if (e.offsetX > panel.clientWidth - 10) { m_pos = ex; document.addEventListener("mousemove", resize); } else if (e.offsetY > panel.clientHeight - 10) { m_pos1 = ey; document.addEventListener("mousemove", resize); } }); document.addEventListener("mouseup", function() { document.removeEventListener("mousemove", resize); }); #styleChangeOuterTag { /* display: none; */ /* position: fixed; */ position: relative; top: 0; left: 0; width: 300px; height: 300px; padding: 2vw 1.5vw; background-color: rgb(255, 245, 245); border: 2px solid rgb(255, 60, 255); border-radius: 3px; z-index: 5; user-select: none; } #styleChangeOuterTag::after { content: ''; background-color: #ccc; position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: ew-resize; } #styleChangeOuterTag::before { content: ''; background-color: #ccc; position: absolute; bottom: 0; right: 0; width: 100%; height: 10px; cursor: ns-resize; } #styleOptionDetails { border: 2px solid purple; border-radius: 3px; padding: 1vw; overflow: auto; } <div id="styleChangeOuterTag"> <hr> <div id="styleOptionDetails"> </div> </div>¿Puede decirnos cómo cambiar el tamaño del ancho en el que se puede hacer clic (parte gris en el contenedor, que activa el cambio de tamaño) ya que ahora no tiene el tamaño correcto y no funciona en todo el ancho?
creado con e.offsetX > panel.clientWidth - 10
Gracias por la ayuda de antemano
Puede agregar una condición adicional a su función de cambio de resize , algo como esto:
const minWidth = 150 const maxWidth = 500 const minHeight = 150 const maxHeight = 500 function resize(e) { const dx = m_pos - ex; const dy = m_pos1 - ey; m_pos = ex; m_pos1 = ey; const newWidth = parseInt(getComputedStyle(panel).width) - dx const newHeight = parseInt(getComputedStyle(panel).height - dy if (newWidth > minWidth && newWidth < maxWidth) { panel.style.width = newWidth + "px"; } if (newHeight > minHeight && newHeight < maxHeight) { panel.style.height = newHeight + "px"; } }