如何制作垂直可重复的div

Question

我正在尝试为垂直重新调整大小的div制作最佳解决方案。

这是我有多远，但我不确定这是否是最佳做法。

修改

我想让这段代码可以重复使用，正如你可以看到的那样，如果我有2,3个以上不同的重新分析器，那就太难了。

---

JsFiddle

JS

var moveHandler = function (e) {
    var leftPos = e.pageX - $("#container").position().left;
    var rightPos = $("#container").width() - e.pageX + 40;
    $("#separator").css("left", leftPos + "px");
    $("#left-side").css("right", rightPos + "px");
    $("#right-side").css("left", leftPos + "px");
}

$("#separator").on('mousedown', function () {
    $("#container").on('mousemove.resize', moveHandler);
    $("#separator").css("background-color", "gray");
});
$(window).on('mouseup', function () {
    $("#separator").css("background-color", "");
    $("#container").off('mousemove.resize')
});

HTML

<div id="container">
    <div id="left-side">.</div>
    <div id="separator"></div>
    <div id="right-side">.</div>
</div>

Answer 1

以下是处理任意数量的适当配置的滑块元素的纯JavaScript：

(function () {
  function mouseDown (ev) {
    function mouseMove (ev) {
      originX = parseInt (window.getComputedStyle (slider).left, 10) + 
                  ev.screenX - originX;
      if (originX >= 5 && originX <= cWidth - 10)
        slider.style.left = slider.previousElementSibling.style.width = 
            slider.nextElementSibling.style.left = originX + 'px';  
      originX = ev.screenX;
    }

    function mouseUp (ev) {
      document.removeEventListener ('mousemove', mouseMove, false)
      document.removeEventListener ('mouseup', mouseUp, false)
      slider.classList.remove ('active');
    }

    var slider = this,
        originX = ev.screenX,
        cWidth = parseInt (window.getComputedStyle (slider.parentNode).width, 10);
    slider.classList.add ('active');
    document.addEventListener ('mousemove', mouseMove, false)
    document.addEventListener ('mouseup', mouseUp, false)
  }

  [].forEach.call (document.querySelectorAll ('.slider'), function (slider) {
      var left = slider.previousElementSibling,
          right = slider.nextElementSibling;

      slider.parentNode.classList.add ('container');

      slider.classList.remove ('active');
      slider.addEventListener ('mousedown', mouseDown, false);

      left.style.position = right.style.position = 'absolute';
      left.style.width = right.style.left = window.getComputedStyle (slider).left;
      left.style.left = right.style.right = '0px';
    });
}) ();

配置如下：

 <div>  <!- container -->
    <div></div>  <!- left side -->
    <div class="slider"></div>  <!- slider -->
    <div></div>  <!- right side -->
 </div>

需要以下css：

.container { position: relative; }

.slider {
    position: absolute;
    z-index: 2;
    width: 5px;
    cursor: col-resize;
    top: 0;
    bottom: 0;    
}

通过查找类名slider来触发代码，然后修复大部分样式值。

详情请见小提琴：http://jsfiddle.net/jstoolsmith/VCdE5/