我想从右到左调整 div 的大小。我见过很多从左到右工作的例子，但我想在从右到左拖动时调整大小。
我有一个 div 位于窗口的最右 Angular ，它的左下角有一个 anchor 。
从左到右拖动时的公式有效，从左到右的效果是什么。
我有一个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>最佳答案
您需要反转此行中的 - 和 + 运算符:
node.style.width = (startWidth + e.clientX - startX) + 'px';
变成:
node.style.width = (startWidth - e.clientX + startX) + '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,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>关于javascript - 从右向左调整 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48278350/