当拖动 #right
元素时,我想调整其父元素的大小。我的示例工作不正确,我无法理解原因。有任何修复方法的提示吗?
以防万一,我在这里要做的是创建一个类似于 this one 的可调整大小的卷轴.但现在,我只对正确的元素感兴趣。
最佳答案
最简单的解决方案如下(注意 SCSS 中#left 和#right 的变化):
SCSS:
#container {
width: 500px;
height: 100px;
background: #f9f9f9;
}
#nav {
width: 100px;
height: 100px;
background: #e9e9e9;
cursor: move;
}
#left {
width: 10px;
height: 100px;
position: absolute;
top:0;
left:0px;
background: #a9a9a9;
cursor: w-resize;
&:hover {
background: #999;
}
}
#right {
width: 10px;
height: 100px;
position:absolute;
top:0;
right:0px;
background: #a9a9a9;
cursor: e-resize;
&:hover {
background: #999;
}
}
JavaScript:
var cont = $("#container")
var nav = $("#nav")
var left = $("#left")
var right = $("#right")
nav.draggable({
containment: cont
});
right.draggable({
containment: cont,
drag: function(e, ui) {
nav.width(ui.position.left);
}
});
唯一的问题是您对 JavaScript 过于痴迷。 ui.position.left 包含您需要的所有信息。我所做的只是将内容从 float 更改为position:absolute;
关于javascript - 拖动内部元素时调整父元素的大小。 (jqueryUI 可拖动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15645007/