javascript - 做一个分离器很薄然后捕获它

Question

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

现在，我想让handle的宽度尽可能细(小于0.1px？)，所以没有办法让宽度(< strong>出现)小于1px？

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

服用 JSBin例如，他们是如何实现面板之间的分离器的？

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

.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;
}

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

Answer 1

如果您希望 handle 看起来更细，请尝试将负值应用于右侧的“col”，例如左边距:-2px；所以它与它左侧的左“col”边框重叠。我不认为你可以使宽度“出现”为 0.1px。 Firefox 是唯一提供这种值(value)的浏览器。 ( https://css-tricks.com/forums/topic/0-1px-borders/ )

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

//将 handle 层提升到顶部

.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;  
}

贾斯宾: https://jsbin.com/nupefekuhu/edit?html,css,js,output