CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sumeet Kumar Yadav
Sumeet Kumar Yadav

Reputation: 12985

Resize div right to left

I want to resize div from right to left. Many examples I have seen working from left to right, but I want to resize on drag from right to left.

I have a div which is on extreme right corner of window and it has ancore on bottom left.

Formula while dragging left to right works, what will be for left to right.

I have one JSBIN demo also 

node.style.width = (startWidth + e.clientX - startX) + 'px';
node.style.height = (startHeight + e.clientY - startY) + 'px'; 


var node = document.getElementById("sumeet");
var resizer = document.createElement('div');

node.className = node.className + ' resizable';
node.style.position = 'absolute';

resizer.className = 'resizer';
resizer.style.cursor = 'se-resize';
resizer.style.bottom = '0';
resizer.style.left = '0';
resizer.style.position = 'absolute';
resizer.style.width = '16px';
resizer.style.height = '16px';
resizer.style.background = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA"
 + "QCAMAAAAoLQ9TAAAAUVBMVEUAAACqqqr+/v4vLy/6+vr+/v7+/v4AAABzc3Nvb2" +
 "////+2trbJycnr6+vPz891dXVzc3OhoaF3d3eioqJ9fX2goKC+vr5/f3/Ly8t8fHz+/" +
  "v4NyOEeAAAAG3RSTlMAjgtAaEpbR3wQA3dyanYndRN+L4g2mjByeR/" +
  "NwbV+AAAARklEQVR4XmMgDTAzokqwM7KgybMxockzoctziqLJc/" +
  "ChynNws6LK87ByEZLnF4DLCwoB5YVFeMECYkB5cQmgfkleKQYiAADT4wJh2XodKgAAAABJRU5ErkJggg==')"
node.appendChild(resizer);

var startX, startY, startWidth, startHeight;
var doDrag = function(e) {
  node.style.width = (startWidth + e.clientX - startX) + 'px';
  node.style.height = (startHeight + e.clientY - startY) + 'px';
}

var stopDrag = function(e) {
  console.log("stop drag")
  document.documentElement.removeEventListener('mousemove', doDrag, false);
  document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

var startDrag = function(e) {
   startX = e.clientX; // horixontal cordinate
   startY = e.clientY; // vertical cordinate
   startWidth = parseInt(document.defaultView.getComputedStyle(node).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(node).height, 10);   
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
 }

resizer.addEventListener('mousedown', startDrag, false);
div{ 
  height: 200px;
  width: 300px;
  background-color:pink;
  border:1px solid blue;
}

#sumeet{
  position:absolute;
  right:0px;
  top:0px
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="sumeet">Hello Developer, I can be resized.</div>
  
</body>
</html>

Upvotes: 2

Views: 3756

Answers (1)

Turnip
Turnip

Reputation: 36662

You need to reverse the - and + operators in this line: 

node.style.width = (startWidth + e.clientX - startX) + 'px';

Becomes:

node.style.width = (startWidth - e.clientX + startX) + 'px';

Example:

var node = document.getElementById("sumeet");
var resizer = document.createElement('div');

node.className = node.className + ' resizable';
node.style.position = 'absolute';



resizer.className = 'resizer';
resizer.style.cursor = 'se-resize';
resizer.style.bottom = '0';
resizer.style.left = '0';
resizer.style.position = 'absolute';
resizer.style.width = '16px';
resizer.style.height = '16px';
resizer.style.background =" url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAUVBMVEUAAACqqqr+/v4vLy/6+vr+/v7+/v4AAABzc3Nvb2////+2trbJycnr6+vPz891dXVzc3OhoaF3d3eioqJ9fX2goKC+vr5/f3/Ly8t8fHz+/" +
  "v4NyOEeAAAAG3RSTlMAjgtAaEpbR3wQA3dyanYndRN+L4g2mjByeR/" +
  "NwbV+AAAARklEQVR4XmMgDTAzokqwM7KgybMxockzoctziqLJc/" +
  "ChynNws6LK87ByEZLnF4DLCwoB5YVFeMECYkB5cQmgfkleKQYiAADT4wJh2XodKgAAAABJRU5ErkJggg==')"
node.appendChild(resizer);



 var startX, startY, startWidth, startHeight;



var doDrag = function(e) {
  node.style.width = (startWidth - e.clientX + startX) + 'px';
  node.style.height = (startHeight + e.clientY - startY) + 'px';
 
}
var stopDrag = function(e) {
  console.log("stop drag")
  document.documentElement.removeEventListener('mousemove', doDrag, false);
  document.documentElement.removeEventListener('mouseup', stopDrag, false);
}





 var startDrag = function(e) {
   startX = e.clientX; // horixontal cordinate
   startY = e.clientY; // vertical cordinate
   startWidth = parseInt(document.defaultView.getComputedStyle(node).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(node).height, 10);   
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
 }


resizer.addEventListener('mousedown', startDrag, false);
div{ 
  height: 200px;
  width: 300px;
  background-color:pink;
  border:1px solid blue;
}

#sumeet{
  position:absolute;
  right:0px;
  top:0px
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="sumeet">Hello Developer, I can be resized.</div>
  
</body>
</html>

Upvotes: 4

Related Questions