我有两个 div，我希望它们共享其父级的 100% 宽度。我之间还有一个小分隔线，可以让它们动态调整大小。但总面积必须保持不变。我已经上传了我的解决方案:http://jsfiddle.net/aRQ7a/
但是，由于我减小了前一个 slider 的尺寸，因此 slider 向后移动得更远，它们没有正确对齐。我怎样才能解决这个问题？我的代码如下:
CSS:
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-flex;
height: 300px;
padding: 0px;
margin: 0px;
}
#part1 {
width: 47%;
background-color: red;
}
#part2 {
width: 47%;
background-color: green;
}
.divider {
width: 5%;
background-color: blue;
}
HTML:
<body>
<div id="part1"></div>
<div class="divider"></div>
<div id="part2"></div>
</body>
Javascript:
$(function () {
var p1 = parseInt($("#part1").css("width"));
var p2 = parseInt($("#part2").css("width"));
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
start: function(){
p1 = parseInt($("#part1").css("width"));
p2 = parseInt($("#part2").css("width"));
},
drag: function (event, ui) {
var a = parseInt($(this).css("left"));
$(this).prev().css("width", p1 + a);
$(this).next().css("width", p2 - a);
}
});
});
最佳答案
检查这个
js
$(function () {
var p1 = parseInt($("#part1").css("width"));
var p2 = parseInt($("#part2").css("width"));
var fullWidth= $('body').width();
var initialPos = parseInt($(".divider").css("left"));
$(".divider").draggable({
axis: "x",
containment: "parent",
scroll: false,
drag: function () {
var a = parseInt($(this).css("left"));
$("#part1").css("width", a);
$("#part2").css("width", fullWidth-a);
}
});
});
CSS
* {
margin: 0px;
padding: 0px;
}
div {
display: inline-block;
height: 300px;
}
#part1 {
position: absolute;
width: 47%;
background-color: red;
}
#part2 {
position: absolute;
right:0;
width: 47%;
background-color: green;
}
.divider {
width: 5%;
position:absolute;
left: 47%;
background-color: blue;
}
关于javascript - JQuery UI 可拖动来调整 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20425675/