Resize Div with mousemove

Question

Resize Div with mousemove

Navigation

#1 by (3 votes)

0

I have a problem with the div when I enlarge it, I do not know why it jumps and it does not get larger as the pointer moves on the screen. I am using html5, CSS3, bootstrap and JS with jQuery. This is inside a table. This is my code.

$(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>

Here it seems to work correctly but in my environment localhost when dragging the pointer over the div it jumps and enlarges the div approximately 30 or 40 px more. The question is, in what way can I avoid that jump when performing the resizing of the div? Thanks.

javascript html5 css3 bootstrap

asked by leo_vilchis 25.07.2018 в 19:43

source

1 answer

Monitor process when closing C # I can not put the button as setEnable: NO

score 3 · Accepted Answer

You are calculating the width of the element in the following way:

var width = e.clientX;

However, e.clientX returns the position with respect to the window. Your width should not have the offset to the left of your control:

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

This way the width of your control will be calculated correctly.

Greetings.