Question

我想从右到左调整div的大小。我看过很多从左到右工作的例子，但我想从右到左调整大小。

我有一个位于窗口右下角的div，左下角有一个核心。

从左到右拖动时的公式有效，从左到右。

我还有一个JSBIN演示

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>

Answer 1

您需要撤消此行中的-和+运算符：

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

<强>变为：

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

示例：

从右到左调整div

1 个答案: