0

ステート マシン用の Web ページを設計しており、jsplumb ステート マシンを使用しています。このステート マシンを複数のタブで描画したいと考えています。タブは「新規」ボタンを使用して動的に作成されます

<div id="tabs">
    <ul>
        <li>
            <a href="#Untitled-1">Untitled-1</a>
            <span class="ui-icon ui-icon-close"></span>
        </li>
    </ul>
    <div id="Untitled-1" class="content">
        <div id="Untitled-1-content" class="fsm">
        </div> 
    </div>
</div>

クラス「fsm」の div 領域では、ステート マシン (SM) ブロックをドラッグして「fsm」の div にドロップすることにより、ステート マシンが動的に描画されます。複数のタブがある場合、SM ブロックを fsm div にドロップした後、最初のタブでのみ fsm div にドラッグでき、他のタブにはドラッグできません。たとえば、タブが 2 つある場合、SM ブロックの位置を変更できるのは 1 番目のタブだけです。2 番目のタブで SM ブロックをドラッグし始めると、fsm div から消え、左上の座標が負になります。

これは fsm div のコードです -

$("div.fsm").droppable({
    accept: ".cTemp, .rTemp",
    hoverClass: "ui-state-hover",
    drop: function (event, ui) {
        var draggable = $(ui.draggable[0]);
        if (draggable.attr("class").indexOf("rTemp") > -1) {
            $("<div class='rBase'  id='rect" + rectI + "'></div>").text("rect" + rectI).appendTo(this);
            $("#rect" + rectI).append("<div class='ep'></div>").appendTo(this);
            $("#rect" + rectI).addClass("draggable");                  

            jsPlumb.draggable($(".rBase"),{containment: ".fsm", zIndex: 30});
        } else if (draggable.attr("class").indexOf("cTemp") > -1) {
            $("<div class='cBase' id='circle" + circleI + "'></div>").text("circle" + circleI).appendTo(this);
            $("#circle" + circleI).append("<div class='ep'></div>").appendTo(this);
            $("#circle" + circleI).addClass("draggable");

        jsPlumb.draggable($(".cBase"),{containment: ".fsm", zIndex: 30});

       }

       jsPlumbDemo.init();
}

});

これは、fsm div が動的に作成されたか、複数の fsm div があるためである可能性があります。このマルチタブの状況を処理するための最良のオプションは何ですか?

アクティブなタブを除くすべてのタブから fsm div を削除しようとすると、機能します。fsm div は 1 つしかないため、複数のタブがある場合でも、タブ コンテンツから SM ブロックをドラッグできます。しかし、そのタブに切り替えたときに fsm div をタブに再度追加する必要があります。次に、他のタブに切り替える前にタブのコンテンツを保存し、そのタブが開かれたときにそれをロードする最良の方法はどれですか?

私のバックグラウンドを説明すると、jquery/jsplumb に取り組むのはこれが初めてなので、詳細な説明は非常にありがたいです。

4

1 に答える 1

0

ここにいくつかのコメントがあります

  1. attr("class")indexOf の代わりに Jquery コマンド hasClass() を使用できます
  2. タブを処理するには、Jquery コマンド tabs() を使用していると思いますか? その場合、何も保存する必要はありません。

  3. ドロップの問題に関する限り、ドロップ先の div を指定する draggable() パラメータで appendTo: プロパティを使用する必要があります。このようにjqueryタブ選択イベントに反応することで、ターゲットタブを変更できます

    $("#tabs").tabs({ select: function(event, ui) { // あなたのコード } });

私があなたのために作ったこのフィドルで遊ぶことができます

http://jsfiddle.net/webaba/sy9PJ/

$(document).ready(function () {

    // Calls custom select tab function, scroll down for implementation
    selectTab(1);

    // Block models are made draggable
    function selectTab(tabIndex) {
        var tabName = '#tab'+tabIndex;
        $(".model").draggable({
            appendTo: tabName,
            helper: 'clone'
        });
    }

    // Tabs div is formatted as tabs by jquery
    $("#tabs").tabs({
        select: function (event, ui) {
            selectTab(ui.index + 1);
        }
    });

    //Sets canvas as droppable
    $(".tab").droppable({

        accept: ".model",
        drop: function (event, ui) {
            var newBlock = ui.helper.clone();
            $(newBlock).removeClass("model").addClass("block");
            $(this).append($(newBlock));
            $(newBlock).draggable({containment:$(this)});  
            return true;
        }
    });
});

そしてhtml

<body>
    <div id="container">
        <div id="library">
            <div class="model type1" type="1">Block1</div>
            <div class="model type2" type="2">Block2</div>
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#tab1">Tab1</a>
                </li>
                <li><a href="#tab2">Tab2</a>
                </li>
                <li><a href="#tab3">Tab3</a>
                </li>
            </ul>
            <div id="tab1" class="tab">Tab1</div>
            <div id="tab2" class="tab">Tab2</div>
            <div id="tab3" class="tab">Tab3</div>
        </div>
    </div>
</body>

そしてCSS

#container {
    width:100%;
    height:300px;
}
#tabs {
    height:300px;
    width:70%;
    float:right;
    border:1px solid black;
}
.tab{
    height:100%;
    border:1px dotted blue;
}
#library {
    border:1px solid black;
    width:20%;
    height:300px;
    float:left;
}
.type1 {
    width:50px;
    height:50px;
    border:1px solid green;
}
.type2 {
    width:50px;
    height:20px;
    border:1px solid red;
}
于 2013-08-02T16:27:57.333 に答える