Question

我正在为状态机设计一个网页，我正在使用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中来动态绘制状态机。如果有多个选项卡，在fsm div中删除SM块后，它只能在第一个选项卡上的fsm div中拖动，而不能在另一个选项卡中拖动。例如，如果有2个选项卡，我可以仅在第一个选项卡中重新定位SM块，在第二个选项卡上，当我开始拖动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是动态创建的，或者有超过1个fsm div。处理这种多标签情况的最佳选择是什么？

我尝试从除活动标签之外的所有标签中删除fsm div然后它可以正常工作。我可以从选项卡内容拖动SM块，即使有超过1个选项卡，因为只有1个fsm div。但是当我切换到该选项卡时，我必须再次将fsm div添加回选项卡。那么哪个是在切换到任何其他选项卡之前保存选项卡内容的最佳方法，并在打开该选项卡时将其加载回来？

为了给我的背景，这是我第一次在jquery / jsplumb上工作，所以非常感谢您的详细解释。

Answer 1

以下是几条评论

您可以使用Jquery命令hasClass（）而不是attr（“class”）indexOf
要处理标签我猜您正在使用Jquery命令标签（）？在这种情况下，你不需要保存任何东西。
就丢弃问题而言，你应该在draggable（）参数中使用appendTo：属性来指定它们应该被删除的div。您可以通过以这种方式响应jquery选项卡select事件来更改目标选项卡

$（ “＃选项卡”）。翼片（{ 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;
}

多个选项卡上的jsplumb状态机

1 个答案: