jsplumb状态机在多个标签上

我正在为状态机设计一个网页，我使用的是jsplumb状态机。我想在多个选项卡上绘制这个状态机。被动态地使用“新建”按钮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”的格区域创建标签，状态机通过拖动状态机（SM）嵌段和在“FSM” DIV丢弃它动态地绘制。如果有多个选项卡，则在删除fsm div中的SM块后，它只能在第一个选项卡上的fsm div中拖动，而不在其他选项卡中。例如，如果有2个选项卡，则只能在第1个选项卡中的第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，所以非常感谢你的详细解释。

来源

2013-07-29 user2630745

这里是一对夫妇的意见

可以使用jQuery的命令hasClass（），而不是ATTR（“类”）的indexOf
要处理的标签我猜你是使用jQuery命令选项卡（）？在这种情况下，你不需要保存任何东西。
就您的丢弃问题而言，您应该使用draggable（）参数中的appendTo：属性来指定它们应该放置到哪个div。您可以通过这种方式反应，jQuery的选项卡中选择事件

$（ “＃标签”）更改目标选项卡标签（{ 选择：函数（事件，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-02 16:27:57 webaba

谢谢你的webaba。这在某种程度上可能对我有所帮助。 – user2630745

遏制：$（this）做了诡计。感谢您的其他意见。@Webaba，请你解释一下，你怎么能够在选项卡区域的所需位置拖放块？在我的情况下，当我在选项卡区域中放置块时，无论放在哪里，它总是进入（0,0）放置区域的位置。 – user2630745

这是因为您不断将其重新放置到放置区域。为了避免这种情况，请检查父级，如果它已经是选项卡，则将false返回到放置事件。 – webaba

jsplumb状态机在多个标签上

回答

相关问题