JQuery Resizable + flexbox + jQueryダイアログ=後方リサイズ

Question

JQueryダイアログを埋める2つの垂直セクションを持つダイアログを作成しようとしています。 2つのセクションはすべてのスペースを占める必要があり、各セクションがどれくらいのスペースを取るかを判断するために中央に区切りがあります。私はflexboxとJQuery resizeableを使用しています。

これまでのところ素晴らしいです！ ....リサイズのコントロールが反転されている点を除いて。下にドラッグすると下のセクションが大きくなり、上にドラッグすると上のセクションが大きくなります。 ：P（ハンドルはまったくマウスに追従しません）

jQueryのサイズ変更可能なサイズ変更の方向を反転することはできますか？あるいは、この問題を解決する良い方法がありますか？ここで

は、私がこれまで持っているものです。

https://jsfiddle.net/ezjpL1t1/3/

$(".theDialog").dialog({ 
 
    resizable: true, 
 
    autoOpen: true, 
 
    height: 400 
 
}); 
 

 

 
$(".B").resizable({ 
 
    handles: { 
 
    's': '.handle' 
 
    }, 
 
    resize: function(event, ui) { 
 
    ui.element.css('width', 'auto'); 
 
    } 
 
});

textarea { 
 
    height: calc(100% - 50px) !important; 
 
    width: calc(100% - 75px) !important; 
 
    resize: none; 
 
} 
 
.AB { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 
.A { 
 
    overflow-y: auto; 
 
    flex: 2; 
 
} 
 
.B { 
 
    min-height: 100px; 
 
    overflow-y: hidden; 
 
} 
 
.handle { 
 
    height: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div class='theDialog'> 
 
    <div class='AB'> 
 
    <div class="A"> 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 

 
    </div> 
 
    <div class='B'> 
 
     <hr class='handle'> 
 
     <textarea maxlength='50000'></textarea> 
 
     <button>reply</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

大丈夫、私は回避策を見つけました。私はresizeableとjQuery draggableの使用を避け、カスタムソリューションを作成しました。

https://jsfiddle.net/817b3916/5/

$(".handle").mousedown(function(event){ 
    var offset = event.pageY; 
    $(".handle").data("yPos",offset); 
    $(".handle").data("height",$(".A").height()); 
    $(".handle").data("mouseDown","yes"); 
    }); 

    $(document).mouseup(function(){ 
    $(".handle").data("mouseDown","no"); 
    }); 


    $(document).mousemove(function(event){ 
    if($(".handle").data("mouseDown") != "yes"){ 
    return true; 
    } 
    var offset   = event.pageY; 
    var newHeight = $(".handle").data("height") - (($(".handle").data("yPos")-offset)); 
    var newHeightB = $(".AB").height()-newHeight; 
    if(newHeightB < parseInt($(".B").css('min-height'),10)){ 
     newHeightB = parseInt($(".B").css('min-height'),10); 
     newHeight  = $(".AB").height()-newHeightB; 
    } 
    if(newHeight < parseInt($(".A").css('min-height'),10)){ 
     newHeight = parseInt($(".A").css('min-height'),10); 
     newHeightB = $(".AB").height()-newHeight; 
    } 
    $(".A").height(newHeight); 
    $(".B").height(newHeightB); 



    }); 

私はあなたが説明をしたいかの改善がある場合はコメント、それはかなり単純明快だと思う：あなたが興味を持っている場合はここでの結果でした。