0

Tengo un problema con el div al momento de agrandarlo no se por que razón da un salto y no se va agrandando conforme se mueve el puntero en la pantalla. Estoy utilizando html5, CSS3, bootstrap y JS con jQuery. Esto se encuentra dentro de una tabla. Este es mi código.

$(document).ready(function() {
  var resizeHandle = document.getElementById('ctr_jose_right');
  var box = document.getElementById('tarea_jose');

  resizeHandle.addEventListener('mousedown', initialiseResize, false);

  function initialiseResize(e) {
    window.addEventListener('mousemove', startResizing, false);
    window.addEventListener('mouseup', stopResizing, false);
  }

  function startResizing(e) {
    //Obtiene la posicion del mouse en la pantalla
    var width = e.clientX;

    var medida = box.style.width = (e.clientX) + 'px';

  }

  function stopResizing(e) {
    window.removeEventListener('mousemove', startResizing, false);
    window.removeEventListener('mouseup', stopResizing, false);
  }
});
.height-barra {
  height: 2px !important;
}

.circle-bar-left-jose {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #3d6cb2;
  position: relative;
  top: -4px;
  left: 0px;
  display: block;
  margin-bottom: -15px;
  float: left;
}

.circle-bar-right-jose {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #3d6cb2;
  position: relative;
  top: -4px;
  right: 0px;
  display: block;
  margin-bottom: -15px;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<table>
<tr>
<td id="table_right" width="70%" style="vertical-align: text-top; position: absolute;">
<div class="col-md-12">
  <span data-toggle="tooltip" data-placement="top" title="Project Manager">
    <div id="tarea_jose" style="width: 450px;">
     <p class="text-center delete-margin-bottom"><span id="porcentaje_planificacion_usuario" class="text-barra">100%</span></p>
  <div id="ctr_jose_left" class="circle-bar-left-jose"></div>
  <div id="ctr_jose_right" class="circle-bar-right-jose"></div>
  <div class="progress height-barra">
    <div id="bar_planificacion_integrante" class="progress-bar barra-planificacion" role="progressbar" style="width: 450px;"></div>
    <div id="bar_planificacion_integrante_faltante" class="progress-bar-striped" role="progressbar" style="width: 0px;"></div>
  </div>
</div>
</span>
</div>
</td>
</tr>
</table>

Aquí parece que funciona correctamente pero en mi ambiente localhost al momento de arrastrar el puntero sobre el div da un salto y agranda el div aproximadamente 30 o 40 px de más. La pregunta es ¿De que manera puedo evitar que de ese salto al realizar el resizing del div? Gracias.

1 respuesta 1

3

Estás calculando el ancho del elemento de la siguiente forma:

var width = e.clientX;

Sin embargo, e.clientX devuelve la posición con respecto a la ventana. Tu ancho no debería tener el desplazamiento a la izquierda de tu control:

var width = e.clientX - box.offsetLeft;
var medida = box.style.width = width + 'px';

De esta forma el ancho de tu control se calculará correctamente.

Un saludo.

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.