0

我正在为状态机设计一个网页，我正在使用 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 然后它可以工作。即使有超过 1 个标签，我也可以从标签内容中拖动 SM 块，因为只有 1 个 fsm div。但是当我切换到该选项卡时，我必须再次将 fsm div 添加回该选项卡。那么在切换到任何其他选项卡之前保存选项卡内容并在打开该选项卡时将其加载回来的最佳方法是什么？

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

4

1 回答 1

0

这是一些评论

  1. 您可以使用 Jquery 命令 hasClass() 而不是 attr("class")indexOf
  2. 要处理标签，我猜你正在使用 Jquery 命令 tabs() ？在这种情况下，您无需保存任何内容。

  3. 就您的丢弃问题而言，您应该在 draggable() 参数中使用 appendTo: 属性，指定它们应该被丢弃到哪个 div。您可以通过这种方式对 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 回答