有没有办法改变 CSS 调整大小角的位置? [英] Is there a way to change the CSS resize corner's position?
问题描述
所以这是一个有点奇怪的问题.使用可调整大小的 div 编写 Web 应用程序.我目前正在使用 CSS resize 属性，因为它似乎是最简单的方法.问题是我的盒子有一个锁定的底部和左侧位置(我想保持)，但默认选择的调整大小角是右下角，这会在调整顶部大小时产生奇怪的结果.在网上环顾四周，但找不到将那个角移到右上角而不是右下角的方法.关于如何产生这个结果的任何建议?也不反对使用不同的调整大小的方法.这是应用于框的当前样式:
显示:块；字体大小:9pt；位置:绝对；底部:50px；左:20px；填充:10px；最小高度:0；最小宽度:0；边框:纯 1px 黑色；宽度:400px；高度:400px；调整大小:两者；溢出-x:自动；溢出-y:隐藏；这是一张有问题的 div 的图片，它的角上当前有调整大小工具被装箱.任何建议将不胜感激.我很乐意详细说明我也可能错过的事情.谢谢！
这是一个起点.我基本上在右上角创建了一个自定义调整大小图标.然后我使用 'mousedown'、'mousemove' 和 'mouseup' 事件来跟踪调整大小的活动.您或许可以使用拖动"和相关事件来执行类似的操作.
请注意，mousedown"位于调整大小图标上，而mousemove"和mouseup"位于文档正文(或可调整大小的 div 后面的其他一些较大元素)上.
为了简单起见，我在 JavaScript 中硬编码了宽度和高度.这意味着这些值存在于两个不同的地方，这是不好的.您可能应该只将它们放在 JavaScript 中或只放在 CSS 中，而不是像我所做的那样放在两者中.
我需要将可调整大小的 div 放入填充主体的容器中.否则不会注册可调整大小的 div 之外的mousemove"事件.如果您的绝对定位的可调整大小的元素后面"已经有其他内容，这可能不是问题.
供您参考:我最初也尝试使用本机调整大小功能.我使用 transform:rotate(-90deg) 将调整大小的角移动到右上角，然后放入一个带有 transform:rotate(90deg) 的内部 div 来制作内部再次满足正确的方向.然而，虽然这将调整大小角放在正确的位置，但调整大小本身完全混乱，因为鼠标移动和实际调整大小本身偏离了 90 度.这有点难以用语言描述，但足以说明，如果没有一些重大的返工(或者可能是一些出色的代码或隐藏的功能)，我无法使该策略发挥作用.
var文档 = 文档，ht = 400,wd = 400,main = document.querySelector("#resizable"),x, y, dx, dy;var startResize = 函数(evt){x = evt.screenX;y = evt.screenY;};var 调整大小 = 函数(evt){dx = evt.screenX - x;dy = evt.screenY - y;x = evt.screenX;y = evt.screenY;wd += dx;ht -= dy;main.style.width = wd + "px";main.style.height = ht + "px";};rsz.addEventListener("mousedown", function(evt) {开始调整大小(evt)；doc.body.addEventListener("mousemove", resize);doc.body.addEventListener("mouseup", function() {doc.body.removeEventListener("mousemove", resize);});});#container {位置:绝对；边框:纯红色1px；边距:0；高度:100%；宽度:100%；}#可调整大小{显示:块；字体大小:9pt；位置:绝对；底部:50px；左:20px；填充:10px；最小高度:0；最小宽度:0；边框:纯 1px 黑色；宽度:400px；高度:400px；溢出-x:自动；溢出-y:隐藏；}#rsz {位置:绝对；右:0；顶部:0；宽度:20px；高度:20px；背景颜色:rgba(255, 0, 0, 0.5);}#original {}<div id="可调整大小"><div id="rsz"></div>(部分内容)如果您从 Stack Overflow 中运行此代码片段，则需要在单击运行代码片段"后单击完整页面"来展开运行视图区域.
So this is a bit of a strange question. Programming a web application with a resizable div. I'm using the CSS resize property at the moment as it seemed like it was the easiest way to do it. The problem is my box has a locked bottom and left position (which I want to maintain), but the resize corner chosen by default is the lower right one, which produces weird results for resizing the top. Looked around online but couldn't find a way to move that corner to the upper right instead of the bottom right. Any advice on how to produce this result? Also not opposed to using a different method of resizing. Here's the current style being applied to the box:
display: block;
font-size: 9pt;
position: absolute;
bottom: 50px;
left: 20px;
padding: 10px;
min-height: 0;
min-width: 0;
border: solid 1px black;
width:400px;
height:400px;
resize: both;
overflow-x: auto;
overflow-y: hidden;
And here's a picture of the div in question with the corner that currently has the resize tool on it boxed. Any advice would be greatly appreciated. I'm more than happy to elaborate on things I might've missed as well. Thanks!
Box I want to resize in question
Here's one starting point. I essentially created a custom resize icon in the upper right corner. I then used 'mousedown', 'mousemove' and 'mouseup' events to track resizing activity. You might be able to do something similar using 'drag' and related events.
Note the 'mousedown' is on the resize icon, while 'mousemove' and 'mouseup' are on the document body (or some other larger element behind the resizable div).
I've hard-coded the width and height in the JavaScript for the sake of simplicity. That means those values exist in two different places which is not good. You should probably put them only in JavaScript or only in CSS, not in both as I have done.
I needed to put the resizable div into a container that filled the body. Otherwise 'mousemove' events outside of the resizable div were not registered. This might not be an issue if you already have other content "behind" your absolutely positioned resizable element.
For your information: I also initially tried using the native resize functionality. I used transform: rotate(-90deg) to move the resize corner to the upper right, then put in an inner div with transform: rotate(90deg) to make the inside content the right-way-up again. However, while this put the resize corner in the correct place, the resizing itself was completely messed up, as the mouse movements and the actually resizing itself were off by 90 degrees. It's a little hard to describe in words, but suffice it to say that, without some major re-working (or perhaps some brilliant code or hidden function) I couldn't get that strategy to work.
var
doc = document,
ht = 400,
wd = 400,
main = document.querySelector("#resizable"),
x, y, dx, dy;
var startResize = function(evt) {
x = evt.screenX;
y = evt.screenY;
};
var resize = function(evt) {
dx = evt.screenX - x;
dy = evt.screenY - y;
x = evt.screenX;
y = evt.screenY;
wd += dx;
ht -= dy;
main.style.width = wd + "px";
main.style.height = ht + "px";
};
rsz.addEventListener("mousedown", function(evt) {
startResize(evt);
doc.body.addEventListener("mousemove", resize);
doc.body.addEventListener("mouseup", function() {
doc.body.removeEventListener("mousemove", resize);
});
});
#container {
position: absolute;
border: solid red 1px;
margin: 0;
height: 100%;
width: 100%;
}
#resizable {
display: block;
font-size: 9pt;
position: absolute;
bottom: 50px;
left: 20px;
padding: 10px;
min-height: 0;
min-width: 0;
border: solid 1px black;
width: 400px;
height: 400px;
overflow-x: auto;
overflow-y: hidden;
}
#rsz {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0, 0.5);
}
#original {}
<div id="container">
<div id="resizable">
<div id="rsz"></div>
(some content)
</div>
</div>
If you run this code snippet from within Stack Overflow, you need to expand the running view area by clicking on "Full page" after clicking "Run code snippet".
这篇关于有没有办法改变 CSS 调整大小角的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
