-2

私は、垂直方向のサイズ変更が可能な最善の解決策を作ろうとしていますdiv。

これは私が得た距離ですが、これがベストプラクティスであるかどうかはわかりません。

編集

このコードを再利用できるようにしたいのですが、私の場合、2,3 個以上の異なるリサイザーがあると非常に難しいことがわかります。

Jsフィドル

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

1 に答える 1

2

以下は、適切に構成された任意の数のスライダー要素を処理する純粋な 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/

于 2013-07-07T10:03:31.703 に答える