Question

我有两个div，我希望他们分享父母宽度的100％。我之间还有一个小分隔符，允许它们动态调整大小。但总面积必须保持不变。我上传了我的解决方案：http://jsfiddle.net/aRQ7a/

但是，因为我减小了前一个的大小，滑块会更进一步，它们没有正确对齐。我怎样才能解决这个问题？我的代码如下：

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);            
        }
    });
});

Answer 1

工作演示http://jsfiddle.net/aRQ7a/2/

问题是当你拖动分隔线时，鼠标和＃part1都会影响它的位置，这就是为什么它移动了拖动距离的2倍。通过将其设置为绝对位置，我们可以阻止它受到除鼠标之外的任何事物的影响。

通过将＃part2定位到右边：0，我们需要做的就是让它的宽度正确。

$(function () {
    var p1 = parseInt($("#part1").width());
    var p2 = parseInt($("#part2").width());

    $(".divider").draggable({
        axis: "x",
        containment: "parent",
        scroll: false,
        drag: function () {
            var a = parseInt($(this).position().left);
            $("#part1").css({width:a});
            $("#part2").css({width:p1 + p2 -a });
        }
    });
});

CSS

* {
    margin: 0px;
    padding: 0px;
}
div {
    display: inline-block;
    height: 300px;
}
#part1 {
    position: absolute;
    left:0;
    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;
}

另外一件事。分隔线的宽度为5％，但2 x 47％的宽度为6％。您可能想要这种行为，我无法猜测。

Answer 2

检查

http://jsfiddle.net/aRQ7a/3/

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;
}

JQuery UI可拖动以调整div大小

2 个答案: