如何实现Div从右向左拖拽调整大小？附JSBin示例

嘿，我明白你遇到的困扰了——你的Div贴在窗口最右侧，用左下角的拖拽点调整大小，那些从左往右拖拽的示例公式完全不适用对吧？别担心，咱们来把公式改对就行！

问题根源 #

原来的宽度公式 startWidth + e.clientX - startX 是基于元素左边缘固定的场景（比如元素设置了left:0），鼠标向右移动时宽度增加。但你的Div设置了right:0，右边缘是固定的，所以鼠标向左拖拽时，应该是宽度增加，向右拖拽宽度减少，公式逻辑得反过来。

正确的公式调整 #

把宽度计算改成下面这样：

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

原理说明：

• 当你向左拖拽鼠标（e.clientX < startX），startX - e.clientX 是正数，加到初始宽度上，Div宽度增加（左边缘向左延伸，右边缘不动）。
• 当你向右拖拽鼠标（e.clientX > startX），startX - e.clientX 是负数，初始宽度减去这个值，Div宽度缩小（左边缘向右收缩）。

高度的公式不用改，因为你的Divtop:0固定，拖拽向下时高度自然增加，原来的逻辑完全适用。

修正后的完整代码 #

HTML

<!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>

CSS

div{
 height: 200px;
 width: 300px;
 background-color:pink;
 border:1px solid blue;
}
#sumeet{
 position:absolute;
 right:0px;
 top:0px
}

JavaScript

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 + (startX - e.clientX)) + '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);

内容的提问来源于stack exchange，提问作者Sumeet Kumar Yadav