Good day. There is a div on the page. How can I expand any side of the div without offsetting the other sides?

Closed due to the fact that the essence of the question is not clear by the participants Alex , user194374, Denis Bubnov , Denis , Grundy 9 Dec '16 at 9:13 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    Can I have a code sample? And more details, and somehow more clearly and specifically tell the problem. - Vadim Ovchinnikov
  • The problem is as follows. There is a div on the page. When I click on the edge of the element, I start pulling it out. At the same time, only the side at the edge of which I pressed is “pulled out”. For example, the div is in the middle of the page and I begin to pull out its right side. Other sides of the div don't change their position and remain in place. - Drylozav
  • need pure javascript, right or jQuery? - Vadim Ovchinnikov
  • js + html, without jQuery - Drylozav

1 answer 1

Something like this:

var previousX = null; var previousY = null; var $div = document.querySelector(".div"); $div.addEventListener("mousemove", function(e) { // left button clicked if (e.which === 1) { if (previousX !== null && previousY !== null) { var left = parseInt(getComputedStyle($div).left); var top = parseInt(getComputedStyle($div).top); var width = parseInt(getComputedStyle($div).width); var height = parseInt(getComputedStyle($div).height); var deltaWidth = e.offsetX - previousX; var deltaHeight = e.offsetY - previousY; if (deltaWidth > 0) { $div.style.width = (width + deltaWidth) + "px"; } else { $div.style.left = (left + deltaWidth) + "px" $div.style.width = (width - deltaWidth) + "px"; } if (deltaHeight > 0) { $div.style.height = (height + deltaHeight) + "px"; } else { $div.style.top = (top + deltaHeight) + "px" $div.style.height = (height - deltaHeight) + "px"; } } previousX = e.offsetX; previousY = e.offsetY; } }); 
 .div { margin: 100px; width: 200px; height: 200px; background-color: orange; position: absolute; left: 0; top: 0; } 
 <div class="div"> </div>

  • Thanks, I will understand. My version is almost a copy of yours - Drylozav