Home / Questions / 285100
Accepted
qwerty
Asked: 2020-08-11 12:59:52 +0800 CST 2020-08-11 12:59:52 +0800 CST

How to put a limit on a CSS property with Javascript?

  • 772

I have one divthat can only be dragged up and down, but I want it to have a minimum of 250px and a maximum of 650px , I have already searched but have not been able to find a solution yet.
Here you can test the code I have so far.

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>

Thank you very much in advance for your help!

javascript

1 Answers

  1. Best Answer

    Solving your question, you must include an if() inside the mousedown event that evaluates the vertical position of the mouse pointer when it is outside the range between 250px and a maximum of 650px, it does not update the top position of the div.

    Set the top position of the div to 250px for tabulation purposes

    Here I include the modified code.

           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

    • 2