javascript - JQuery Resizable + flexbox + jQuery dialog = 向后调整大小

Question

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

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

无论如何我可以翻转 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>

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



  });

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