JQuery 可调整大小 + flexbox + jQuery 对话框 = 向后调整大小

Question

我正在尝试制作一个包含 2 个垂直部分的对话框，这些部分填充 JQuery 对话框。 2个section应该占满space，中间有个分隔符决定每个section占多少space。我正在使用 flexbox 和 JQuery 可调整大小。

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

有什么方法可以翻转 jQuery resizeable 调整大小的方向吗？或者有更好的方法解决这个问题吗？

这是我目前的情况：

$(".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);



  });

我觉得很简单，如果你想要解释或有改进，请评论。

JQuery 可调整大小 + flexbox + jQuery 对话框 = 向后调整大小

JQuery Resizable + flexbox + jQuery dialog = backwards resizing

javascript

jquery

css

flexbox

jquery-ui-resizable