我有一个div,它从窗口右侧的固定位置开始,但是它是可拖动的(使用javascript)和可调整大小的(使用css)。问题是,如果首先调整div的大小(抓住右下角),它将无法正确调整大小。它将从右侧保持其固定位置,然后从左侧开始增大或缩小。但是,如果首先拖动div,则调整大小将按预期进行。这些是div的当前CSS属性:
#resize {
position: fixed;
right: 30px;
height: 90px;
width: 90px;
background-color: blue;
resize: both;
overflow: auto;
}
演示:
https://jsfiddle.net/mravdo52/2/
我尝试了各种解决方法。由于div的移动似乎可以使resize
正常工作,因此我尝试在加载元素后仅将div移动一个像素,但这是行不通的,因为我认为两个元素之间存在计时问题元素的负载,javascript的执行以及CSS的负载。随后,我尝试使用jQuery promise()
和queue()
先应用css,然后再移动元素,但这些都不起作用。我也尝试过使用jQuery UI resizable()
,但似乎根本没有调整大小。我目前还没有主意,不胜感激。
答案 0 :(得分:1)
仅CSS解决方案: 您只需要最初将left赋予固定位置的div。
解决方案说明: 之所以在拖动元素后工作是因为它应用了左位置,所以我们可以在拖动元素之前给出左位置,这样它就可以工作!
首先尝试提供left: auto/initial/inherit
,但没有成功。
因此,您可以输入以下内容:左:calc(100%-120px);
(120像素代表右位置30像素与div宽度90像素之和)
#resize {
position: fixed;
right: 30px;
left: calc(100% - 120px);
height: 90px;
width: 90px;
background-color: blue;
resize: both;
overflow: auto;
}