Question

我想在几个小组中制作戏曲分割器。互联网上有一些图书馆。我找到了a solution，它很短并且独立于任何库（JQuery除外）。

然而，有一个错误：当我们拖动第一个拆分器，然后是第二个，然后是第一个，等等，有时拖动一个拆分器可能会影响另一个拆分器的位置。这当然不是预期的。

有谁知道如何修复它？

(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;
      $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

        var prev = $('.draggable').prev();
        var next = $('.draggable').next();

        // Assume 50/50 split between prev and next then adjust to
        // the next X for prev

        var total = prev.outerWidth() + next.outerWidth();

        console.log('l: ' + prev.outerWidth() + ', r:' + next.outerWidth());

        var leftPercentage = (((e.pageX - prev.offset().left) + (pos_x - drg_w / 2)) / total);
        var rightPercentage = 1 - leftPercentage;

        if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) {
          return;
        }

        console.log('l: ' + leftPercentage + ', r:' + rightPercentage);

        prev.css('flex', leftPercentage.toString());
        next.css('flex', rightPercentage.toString());

        $(document).on("mouseup", function() {
          $('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 green;
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.handle {
  width: 5px;
  text-align: center;
  color: white;
  transition: all ease-in 0.1s;
}
.draggable {
  background: pink;
}
body {}

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="flex-box">
    <div class="col">
      <h1>Drag The splitters</h1>
      <p>Pellentesque ...</p>
    </div>
    <div class="handle"></div>
    <div class="col">
      <h1>Magic</h1>
      <p>Pellentesque ...</p>
    </div>
    <div class="handle"></div>
    <div class="col">
      <h1>Magic 2</h1>
      <p>Pellentesque ...</p>
    </div>
  </div>
</body>
</html>

Answer 1

那里有好几件事我花了一些时间才弄明白（我接受信用卡：P）

首先，有些事件不断上瘾，例如mouseup，我相信mousemove。

然后关于尺寸调整问题，您正在考虑分割器周围的2个元素共享100％的Flex容器。当你有3个或更多元素时，这当然是错误的。我所做的只是通过调整大小操作获得2个元素的flex框的共享百分比：

var totalPercentage = parseFloat(prev.css('flex')) +  parseFloat(next.css('flex'));

通过这种方式并相应地修正公式，它可以完美地运作。

(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) {
        
        //console.log("mousemove");
        var prev = $('.draggable').prev();
        var next = $('.draggable').next();

        // Assume 50/50 split between prev and next then adjust to
        // the next X for prev

        var total = prev.outerWidth() + next.outerWidth();
        
        var totalPercentage = parseFloat(prev.css('flex')) +  parseFloat(next.css('flex'));

        //console.log('l: ' + prev.outerWidth() + ', r:' + next.outerWidth());
        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;
          }

          //console.log('l: ' + leftPercentage + ', r:' + rightPercentage);
          
          prev.css('flex', leftPercentage.toString());
          next.css('flex', rightPercentage.toString());
        }
      }
      
      $drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() {
            //console.log("mouseup");
            $(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 green;
  flex: 0.33;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hide;
}
.handle {
  width: 5px;
  text-align: center;
  color: white;
  transition: all ease-in 0.1s;
}
.draggable {
  background: pink;
}
body {}

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="flex-box">
    <div class="col">
      <h1>Drag The splitters</h1>
      <p>Pellentesque ...</p>
    </div>
    <div class="handle"></div>
    <div class="col">
      <h1>Magic</h1>
      <p>Pellentesque ...</p>
    </div>
    <div class="handle"></div>
    <div class="col">
      <h1>Magic 2</h1>
      <p>Pellentesque ...</p>
    </div>
  </div>
</body>
</html>

制作draggle灵活分割器的错误

1 个答案: