0

右側の要素「w」のサイズを変更し、中央の要素のサイズに合わせて、両方の幅の合計が変わらないようにします。私がやろうとしたことは、サイズ変更時に中央の要素の px を追加/減算することです。情報 div は、サイズ変更中に正しい中央の幅を示しますが、表示される中央の div の幅は、情報 div に表示される幅と同じではありません。同じ方法で幅のサイズ変更「e」は機能しますが、「w」は機能しません。ここにフィドルがあります：http://jsfiddle.net/perea1/2j6L9/9/ ところで、私は resizeReverse プラグインを使いたくありません。

.wrapper {
    width:300px;
    height:80px;
    background-color:#ccc;
     }
.left {
    float:left;
    width:100px;
    height:80px;
    background-color:yellow;
     }
.middle {
    float:left;
    width:100px;
    height:80px;
    background-color:green;
     }
.right {
    float:left;
    width:100px;
    height:80px;
        background-color:blue;
     }

<div class="wrapper">
    <div class="left"></div>   
    <div class="middle"></div>   
    <div class="right"></div>   
    </div>  
    <div class="info1"></div> 
    <div class="info2"></div> 

$(".right").resizable({
    autoHide: true,
    handles: "w",
    start: function (event, ui) {
        startw = $(this).width();
        midw = $(".middle").width();
    },
    resize: function (event, ui) {
        var resw = $(this).width();
        var neww = startw - resw;

        $(".middle").css("width", ui.originalSize.width + neww);
        $(".info1").text(resw);
        $(".info2").text(midw + neww);

    }
});
4

1 に答える 1

0

右の要素に位置 0 を追加しましたが、動作するようになりました

$(this).css("left","0");
于 2013-11-05T15:36:38.937 に答える