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狀態機在多個標籤上

回答

相關問題