Question

我想在2个面板之间制作一个切换分割器。以下是工作版本。

现在，我想让handle的宽度尽可能薄（小于0.1px？），因此无法制作宽度（显示）小于1px？

此外，当分割器很薄时，很难用鼠标选择。有没有办法让拆分器易于抓取？

以JSBin为例，他们是如何设法实现小组之间的分裂？

＆＃13;

(function($) {
  $.fn.drags = function(opt) {
    
    opt = $.extend({
      handle: "",
      cursor: "ew-resize",
      min: 10
    }, opt);

    if (opt.handle === "") {
      var $el = this;
    } else {
      var $el = this.find(opt.handle);
    }

    var priorCursor = $('body').css('cursor');

    return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
      
      priorCursor = $('body').css('cursor');
      $('body').css('cursor', opt.cursor);

      if (opt.handle === "") {
        var $drag = $(this).addClass('draggable');
      } else {
        var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
      }
      
      var z_idx = $drag.css('z-index'),
        drg_h = $drag.outerHeight(),
        drg_w = $drag.outerWidth(),
        pos_y = $drag.offset().top + drg_h - e.pageY,
        pos_x = $drag.offset().left + drg_w - e.pageX;
      
      var mouseMove = function(e) {        
        
        var prev = $('.draggable').prev();
        var next = $('.draggable').next();

        var total = prev.outerWidth() + next.outerWidth();
        
        var totalPercentage = parseFloat(prev.css('flex')) +  parseFloat(next.css('flex'));

        var offset = prev.offset();
        if(offset){
          var leftPercentage = ((e.pageX - offset.left - drg_w / 2) / total) * totalPercentage;
          var rightPercentage = totalPercentage - leftPercentage;

          if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) {
            return;
          }

          prev.css('flex', leftPercentage.toString());
          next.css('flex', rightPercentage.toString());
        }
      }
      
      $drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() {
            $(this).off("mousemove", mouseMove).off("mouseup");
            $('body').css('cursor', priorCursor);
            $('.draggable').removeClass('draggable').css('z-index', z_idx);
        });
      e.preventDefault(); // disable selection
    });
  }
})(jQuery);

$('.handle').drags();

＆＃13;

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid grey;    
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.handle {
  width: 1px;
  text-align: center;
  background: grey;
  transition: all ease-in 0.1s;
}
.draggable {
  background: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-box">
  <div class="col">
    <p>Pellentesque ...</p>
  </div>
  <div class="handle"></div>
  <div class="col">
    <p>Pellentesque ...</p>
  </div>
</div>

＆＃13;

Answer 1

如果您希望手柄看起来更薄，请尝试将负值应用于右侧＆＃34; col＆＃34;例如margin-left：-2px;所以它重叠了左边的＆＃34; col＆＃34;它左边的边界。我不认为你可以使宽度＆＃34;出现＆＃34;为0.1px。 Firefox是唯一能够呈现这种价值的浏览器。（https://css-tricks.com/forums/topic/0-1px-borders/）

.flex-box .col:last-child {
   margin-left: -2px;
}

//将句柄层提升到顶部

.handle {
    .....
    z-index: 9999; 
}

希望这会有所帮助......

<强> *编辑：

这是我可以接近您的请求的最接近的地方：

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid grey;
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.flex-box .col:last-child {
   margin-left: -6px;
}
.handle {
  width: 5px;
  text-align: center; 
  transition: all ease-in 0.1s;
  z-index: 999;
  overflow: visible;  
}
.handle-inner{ 
   width: 5px; 
   height: 100%; 
   position: relative; 
   margin-left: -10px;
} 
.draggable {
  background: grey;  
}

Jsbin： https://jsbin.com/nupefekuhu/edit?html,css,js,output

使分离器非常薄并抓住它

1 个答案: