2013-03-11 37 views
1

我似乎無法弄清楚如何選擇特定的jsPlumb連接器。我知道我可以選擇與源或目標有關的所有連接器,但我經常會在同一源和目標之間有多個連接器,所以我沒有看到在這種情況下能夠選擇特定連接器的方法。jsPlumb:我如何選擇特定的連接器

我的具體使用情況是如下:

如果用戶點擊一個連接器,給他們一個對話框,允許他們編輯連接。 (即設置標籤名稱,刪除連接)。現在,如果他們設置標籤或刪除連接,我不得不分離圖中的所有內容,然後重新繪製所有內容。這種方法起作用了,只要能夠分離已修改的一個連接或只是更改其標籤就可以看起來更清晰。

想法?

回答

1

據我瞭解你的問題,你想分離連接,當用戶點擊它。

你需要做什麼:

  1. 註冊「點擊」聽者jsPlumb events

  2. 一旦點擊就會觸發事件觸發事件 連接使用jsPlumb.detach的連接,這將刪除它同時保留 端點不變。

這裏是我使用的代碼示例:

 //connection was established let's add listener 
     jsPlumb.bind("jsPlumbConnection", function(info) { 

      //get connection from event info 
      var connection = info.connection; 

      //add on click event 
      connection.bind("click", function(conn) { 
       jsPlumb.detach(conn); 
      }); 
     }); 

Original demo - Updated Demo

+1

哇,我真的沒有解釋我的問題很好。大聲笑。我相信我的問題的基礎是,當單擊連接器時,我不知道如何確定數據庫中的哪個連接對象被點擊。然而,我發現我可以在連接器上設置一個ID,這給了我一個解決方案。 – dchapman 2013-03-22 13:13:58

+0

更新了資源 – 2014-05-13 02:12:24

0
if(action == "delete"){ 
     jsPlumb.remove(object_selected, { 
      fireEvent: false, 
      forceDetach: false 
     }) 

或本:

$(document).keyup(function(e){ 
     if(e.keyCode == 46){ 
      if(connection != null){ 
       jsPlumb.detach(connection); 
       connection = null; 
      } 

      if(object_selected != null){ 
       jsPlumb.remove(object_selected); 
       object_selected = null; 
      } 
     } 

    })