$('.sossage') .mousedown(function (e) { offsetx = e.offsetX; var elWidth = parseInt($(this).css('width')); if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) { resizeState = true; clientXforResize = e.clientX; initialWidth = parseInt($(this).css('width')); } }) .mouseup(function (e) { resizeState = false; var elWidth = parseInt($(this).css('width')); if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) { resizeState = false; } }); $(document) .mousemove(function (e) { if (resizeState == true) { var widthOffset = clientXforResize - e.clientX; $('.sossage').css({ 'width': (initialWidth - widthOffset) + 'px' }); } }) .mouseup(function () { resizeState = false; });
  • 'var that = this' in the contest that you want to transfer to the function and 'this = that' in the function itself, so that the context of its execution is the same as that of the "parent". If it is not very clear, write it down - I will try to roll a normal post - Den
  • @Den honestly not very - Baga
  • In the rows var elWidth = parseInt($(this).css('width')); this indicates exactly the clicked element. And sossage lot of elements with the sossage class. My problem is precisely to work with each individual element. - Baga
  • if you output 'this' to the console after this line, then get 1 div - Den

1 answer 1

The mousemove works with all the elements of the array, and only 1 is needed. The only problem is that as soon as the cursor goes beyond the div, the script becomes buggy. e.target is no longer div. Slightly remade.

 var resizeState = false; var my_target; $('.sossage') .mousedown(function (e) { offsetx = e.offsetX; var elWidth = parseInt($(this).css('width')); if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) { my_target = e.target; resizeState = true; clientXforResize = e.clientX; initialWidth = parseInt($(this).css('width')); } }) .mouseup(function (e) { resizeState = false; var elWidth = parseInt($(this).css('width')); if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) { resizeState = false; my_target = null; } }); $(document) .mousemove(function (e) { if (resizeState == true) { var widthOffset = clientXforResize - e.clientX; $(my_target).css({ 'width': (initialWidth - widthOffset) + 'px' }); } }) .mouseup(function () { resizeState = false; }); 
 .sossage { display: inline-block; height: 50px; width: 50px; margin: 50px; border: 5px solid black; background-color: purple; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sossage"></div> <div class="sossage"></div> <div class="sossage"></div> <div class="sossage"></div> <div class="sossage"></div> <div class="sossage"></div>

  • Yes, and breaks the whole page) - Baga
  • Redid, check now - Den
  • I'm finally confused. Now the resize doesn't work at all and is empty in the console. - Baga
  • Works. But as before. Dragging all the divas at the same time. - Baga
  • The problem is different. I understood. Elements are pushing each other ... - Baga