JQuery可調整大小+ flexbox + jQuery對話框=向後調整大小

我想用2個垂直部分填充JQuery對話框進行對話。這兩個部分應占據所有空間，中間有一個分隔線以確定每個部分需要多少空間。我使用flexbox和JQuery可調整大小。JQuery可調整大小+ flexbox + jQuery對話框=向後調整大小

到目前爲止它效果很好！ ....除了調整大小的控件被翻轉。向下拖動會使底部更大，同時拖動使頂部更大。：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>

來源

2016-10-04 Skeets O' Reilly

我的瀏覽器工作正常，沒有你提到的問題。你正在使用哪種瀏覽器？ –

我使用鉻53.0.2785.143米，只是現在更新到最新的版本。仍然有同樣的問題。 –

@SuperCoolHandsomeGelBoy - oops，我在問題中向後描述了這個問題。剛編輯它來修復。基本上，調整大小並不像預期的那樣工作。 –

好吧，我發現了一個變通。我只是避免使用可調整大小和jQuery可拖動，並提出了一個自定義的解決方案。這裏是結果，如果你有興趣：

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



    });

我認爲這是非常直接的，如果你想要一個解釋或者有改進意見。

來源

2016-10-04 05:37:41

JQuery可調整大小+ flexbox + jQuery對話框=向後調整大小

回答

相關問題