連続するdivやtableをサイズ変更できるようにしたい

標準で実装されないものか… 次のような境界線をドラッグで操作できるようにしたい。
←これをユーザがマウスで操作できるようにしたい
flex
←これとか
resizeスタイルシートを使えばいいのでは?とは思うが、 全体の幅を固定して、残りのスペースを別のdivで埋めて…とはいかない様子。 「flexはresize等の機能は無い」と言い切っているサイトもある。 bootstrapも見渡したけれども見つからなかった。 iframeは避けたい。
検索キーワードを試行錯誤しながらググったら出た。教えてgooだけれども。

【Javaxcript CSS】擬似フレームサイズをマウスで変更したい http://oshiete.goo.ne.jp/qa/4591272.html

リンク先がずばり答えなんですが、せっかくなのでjQueryで実装しました。 リンク先はfloatで実装していますが、こちらはdisplay:table-cell;で実装。 「あっmousedown,mouseupで無理やり作ってるな」と気づいて頂ければおk。
Left
Left
 
Right


<script type="text/javascript">
<!--
$(document).ready(function(){
    initializeBorder();
});
function initializeBorder(){
    var flgDrag = 0;
    $("#div_divider_space").on("mousedown",function(){ flgDrag = 1; });
    $(document).on("mouseup"  ,function(){ flgDrag = 0; });
    $(document).on("mousemove",function(e){
        if(!flgDrag){ return false; }
        var dom = $("#div_divider");
        var leftSize = (window.event || e).clientX - dom.offset().left;
        var width = dom.width();
        if(40 <= leftSize && leftSize + 100 <= width){
            console.log(leftSize,width);
            $("#div_divider_left").width(leftSize);
            $("#div_divider_right").width(width - leftSize);
        }
    });
}
// -->
</script>

<style type="text/css">
#div_divider{
    width:calc(100% - 15px);
    display:table;
    color:black;
}

#div_divider_left{
    width:20%;
    display:table-cell;
    background-color: #6ff;
}

#div_divider_right{
    width:80%;
    background-color: #f6f;
    display:table-cell;
}

#div_divider_space{
    display:table-cell;
    width:5px;
    cursor:E-resize;
    background-color: #666;
}
</style>

<div id="div_divider">
    <div id="div_divider_left">
        <div class="panel panel-default" id="div_leftside">
            Left<br>Left
        </div>
    </div>
    <div id="div_divider_space"> </div>
    <div id="div_divider_right">
        <div class="panel panel-default" id="div_editor">
            Right
        </div>
    </div>
</div>

スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

舞葉(ぶよう)

Author:舞葉(ぶよう)
github.io
はてなブログ(競プロ)

古い記事のソースコードは色分けしていないので、高機能テキストエディタに貼り付けたほうが見やすいかも。

検索フォーム
このブログについて
自分がつまづいた話題、なんとなく書きたいと思ったこと、ググったけど殆ど資料なかったぞオイ な話等をアップする予定。通りすがりでも、参考になっていただければと。プログラムの例外入力、メモリリークは責任負いません。投稿された記事は修正・削除する場合があります。
カテゴリ
タグ

HSP3アルゴリズムとデータ構造c++RubyJavaUnity画像解析C機械学習C#LinuxcodeIQKinectMinecraftTonyuSystemraspberrypiPythonHTML5音声制御Simulinkruby俺ルール通信制御Javascriptシミュレーション

counter-shinobi
固定記事
最新記事
最新コメント
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

アクセスランキング
[ジャンルランキング]
コンピュータ
1253位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
219位
アクセスランキングを見る>>