2

Tengo un div que se puede arrastrar sólo hacia arriba y hacia abajo, pero deseo que tenga un mínimo a 250px y máximo a 650px, ya he buscando pero aún no he podido encontrar una solución.
Aquí podrán probar el código que llevo hasta el momento.

var offset = [0];
		var divOverlay = document.querySelector(".panel__bottom-xs");
		var isDown = false;
		divOverlay.addEventListener('mousedown', function(e) {
		    isDown = true;
		    offset = [
		        divOverlay.offsetTop - e.clientY
		    ];
		}, true);
		document.addEventListener('mouseup', function() {
		    isDown = false;
		}, true);

		document.addEventListener('mousemove', function(e) {
		    event.preventDefault();
		    if (isDown) {
		        divOverlay.style.top  = (e.clientY + offset[0]) + 'px';
		        document.querySelector('span').innerHTML = divOverlay.style.top		    }
		}, true);
.panel__bottom-xs {
  position: fixed;
  bottom: 0px;
  background: red;
  height: 50px;
  width: 50px;
  left: 150px;
}
<div class="panel__bottom-xs"></div>
<span></span>

De antemano muchas gracias por su ayuda!

0

1 respuesta 1

2

Resolviendo tu pregunta debes incluir un if() dentro del evento mousedown que evalue la posicion vertical del puntero en el mouse al estar fuera del rango entre 250px y un máximo a 650px no actualice la posicion top del div.

La posicion tope del div la coloque en 250px para efectos de la tabulacion

aqui te incluyo el codigo modificado.

       var offset = [0];
		var divOverlay = document.querySelector(".panel__bottom-xs");
		var isDown = false;

        // evento de pulsar click
		divOverlay.addEventListener('mousedown', function(e) {
		    isDown = true;
		    offset = [
		        divOverlay.offsetTop - e.clientY
		    ];
            
		}, true);

         // evento de soltar click
		document.addEventListener('mouseup', function() {
		    isDown = false;
		}, true);

        // para ambos movimentos
		document.addEventListener('mousemove', function(e) {
		    e.preventDefault();
		    if (isDown) { 
                // rango entre mínimo a 250px y un máximo a 650px
                // e.clientY es el que indica la posicion vertizal del mouse
                // offset[0] tamaño del bloque
                if ( ((e.clientY + offset[0]) >= 250) && ((e.clientY - offset[0]) <= 650)) {
                    divOverlay.style.top  = (e.clientY + offset[0]) + 'px';
                }          
		        document.querySelector('span').innerHTML = e.clientY;	    
                }
		}, true);
  .panel__bottom-xs {
            position: fixed;
            bottom: 0px;
            background: red;
            height: 50px;
            width: 50px;
            left: 150px;
            top:250px;
            }
 <div class="panel__bottom-xs"></div>
    <span></span>
    <br>
    mínimo a 250px y un máximo a 650px

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.