0

そのため、サイズを変更する必要がある 3 つの列を含むコンテナーがあります。コンテナー自体も最終的にはサイズ変更可能である必要がありますが、現時点では、内部の列がドラッグ時に柔軟である限り、静的にすることができます。

私は正しい考えを持っていると思っていましたが、そうではありません。サイズを変更すると、一部のパーツは正しく動きますが、他のパーツは後ろにジャンプするか、途中で正しくサイズ変更してから後ろに動き始めます。これまでのところ、中央のハンドルをつかんでサイズを変更しようとしているのを見ることができます。

http://jsbin.com/arulel/1/edit

Firefox でのみ機能する必要があります。可能であれば、追加のプラグインを使用しないことをお勧めします。

ここにもコードがあります：

 <div id="container">
    <div id="col1" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer first"></div>
    <div id="col2" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer second"></div>
    <div id="col3" class="col">
      <p>"Lorem ipsum..."</p>
    </div>
  </div>

CSS:

#container {
  background: none no-repeat 0 0 scroll #aaa;
  height: 600px;
  border-radius: 0 0 6px 6px;
  width: 700px;
  position: relative;
}

.col {
  height: 100%;
  position: absolute;
  z-index: 8000;
  padding: 0 10px;
}

.first {
  width: 4px;
  height: 100%;
  position: absolute;
  left: 33.33%;
  background-color: white;
  z-index: 9000;
}

.second {
  width: 4px;
  height: 100%;
  position: absolute;
  right: 33.33%;
  background-color: white;
  z-index: 9000;
}

.resizer:hover {
  cursor: col-resize;
}

#col1 {
  background: none no-repeat 0 0 scroll #444;
  border-radius: 0 0 0 6px;
  left: 0;
  right: calc(66.66% - 4px);
}
#col2 {
  background: none no-repeat 0 0 scroll #111;
  left: calc(33.33% + 4px);
  right: calc(33.33% - 4px);
  color: white;
}
#col3 {
  background: none no-repeat 0 0 scroll #777;
  border-radius: 0 0 6px 0; 
  left: calc(66.66% - 4px);
  right: 0;
}

Javascript/jQuery:

$(document).ready(function(){

  $(".first").on("mousedown", function(e){
    mousedownFirst = true;
  });
  $(".second").on("mousedown", function(e){
    mousedownSecond = true;
  });
  $("#container").on("mouseup", function(e){
    mousedownFirst = false;
    mousedownSecond = false;
  });
  $("#container").on("mousemove", function(e){

    parentOffset = $(this).offset();

    if(mousedownFirst){
      $(".first").css("left", e.pageX - parentOffset.left);
      $("#col1").css("right", e.pageX - parentOffset.left);
      $("#col2").css("left", e.pageX - parentOffset.left);      
    }
    if(mousedownSecond){
      $(".second").css("left", e.pageX - parentOffset.left);
      $("#col2").css("right", e.pageX - parentOffset.left);
      $("#col3").css("left", e.pageX - parentOffset.left);
    }

  });

});
4

3 に答える 3

1

プラグインを使用したくない場合は、Javascript を詳しく調べる必要があります。同じ要素で左右を混ぜていますが、実際には機能していないようです。それがポイントではないので、すべてを修正するつもりはありませんが、正しい方向に向けることはできます（とにかく全体を修正しませんでした）.

これが私の編集です： http://jsbin.com/arulel/15/edit

私がしたのはこれを変更することだけでした：

$("#col1").css("right", e.pageX - parentOffset.left);

これに：

 $("#col1").css("width", e.pageX - parentOffset.left);

結果はすでにかなり良くなっているようです。これにより、最初の列の幅が、2 番目の列の先頭までの距離と同じ幅になるように調整されます。このアイデアを完全に機能させるには、幅とそれを計算するための計算に時間を費やす必要があります。

この道をたどらないことを選択した場合は、プラグインをお勧めします。

于 2013-04-26T21:19:31.227 に答える
0

jQuery UIのサイズ変更を使用できます

詳細については、スタック オーバーフローに関する質問を参照してください。

jQueryのサイズ変更可能な例とそのAPIドキュメント

于 2013-04-25T04:27:04.833 に答える