JQuery Resizable + flexbox + jQuery dialog = 向后调整大小答案

【问题标题】：JQuery Resizable + flexbox + jQuery dialog = backwards resizingJQuery Resizable + flexbox + jQuery dialog = 向后调整大小
【发布时间】：2016-10-04 13:37:41
【问题描述】：

我正在尝试创建一个包含 2 个垂直部分的对话框，这些部分填充了一个 JQuery 对话框。 2个部分应该占据所有空间，中间有一个分隔线来确定每个部分占用多少空间。我正在使用可调整大小的 flexbox 和 JQuery。

到目前为止效果很好！ .... 除了调整大小的控件被翻转。向下拖动使底部变大，而向上拖动使顶部变大。 :P（手柄根本不跟随鼠标）

无论如何我可以翻转 jQuery resizeable 调整大小的方向吗？或者有没有更好的方法来解决这个问题？

这是我目前所拥有的：

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>

【问题讨论】：

我的浏览器工作正常，没有你提到的问题。你用的是哪个浏览器？
我使用的是 chrome 53.0.2785.143 m，现在刚刚更新到最新版本。仍然有同样的问题。
@SuperCoolHandsomeGelBoy - 哎呀，我已经在问题中倒退了这个问题。只是编辑它来修复。基本上，调整大小并没有像预期的那样工作。
明确一点，调整大小时手柄应保持在鼠标上。
手柄在向前调整大小时会丢失，但如果向后调整大小，手柄会与鼠标保持一致。

标签： javascript jquery css flexbox jquery-ui-resizable

【解决方案1】：

好的，我找到了解决方法。我只是避免使用可调整大小和可拖动的 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);



  });

我认为这很简单，如果您需要解释或改进，请发表评论。

【讨论】：