如何在拖動動態創建的div時避免jsPlumb連接器斷開

我是jsPlumb的新手。我通過從數據庫中讀取表創建了動態div，並且使用JsPlumb連接器連接了這些div。 divs已被製作成可拖動的。當頁面加載時連接器正確顯示，但當我拖動或移動div時，連接器斷開並移動到頂部。如果我創建一個不是來自數據庫的靜態div，那麼連接器可以完美地工作，當我拖動/移動div時，連接器也會沿着連接到源和目標div的div移動。如何在拖動動態創建的div時避免jsPlumb連接器斷開

在google上完成搜索並通過jsPlumb文檔完成後，我沒有找到任何解決方案。

任何人都可以告訴我應該做些什麼來讓連接器保持連接到源和目的地，即使我們拖動或移動div。

這裏是我做了什麼：

JsPlumb代碼爲一個連接：

jsPlumb.ready（函數（）{

    jsPlumb.connect({ 
        source: "FDiv1", 
        target: "IDiv1", 
        connector: ["Flowchart"], 
        anchors: ["RightMiddle", "LeftMiddle"], 
        paintStyle: { 
         lineWidth: 2, 
         strokeStyle: "rgb(189, 11, 50)", 
         outlineColor: "#666", 
         outlineWidth: 1 
        }, 
        hoverPaintStyle: { strokeStyle: "#7ec3d9" }, 
        detachable: false, 
        endpoint: "Blank", 
        endpointsOnTop: false, 
        deleteEndpointsOnDetach: false, 
        endpointStyle: { fillStyle: "#a7b04b" }, 
        overlays: [ "Arrow" ] 
       }); 

       jsPlumb.draggable($(".bg")); 
    });

我已經硬編碼的來源和後來這裏的目標我應該讓這些動態連接所有其他div。

這裏是動態divs代碼在後面的代碼。

的foreach（在ds.Tables的DataRow DT [0] .Rows） {

  HtmlGenericControl myDiv = new HtmlGenericControl("div"); 
      HtmlGenericControl myDiv2 = new HtmlGenericControl("div"); 

      //********Source Div************** 

      myDiv.ID = "FDiv" + j; 

      myDiv.Attributes.Add("class", "bg"); 
      myDiv.Style.Add(HtmlTextWriterStyle.MarginLeft, "30px"); 
      myDiv.Style.Add(HtmlTextWriterStyle.MarginTop, top + "px"); 
      myDiv.InnerHtml = "Filename: " + dt["Column1"].ToString() + "<br>" + myDiv.ID; 
      PlaceHolder1.Controls.Add(myDiv); 


      //************Target Div**************** 

      myDiv2.ID = "IDiv" + j; 

      myDiv2.Attributes.Add("class", "bg"); 
      myDiv2.Style.Add(HtmlTextWriterStyle.MarginLeft, "260px"); 
      myDiv2.Style.Add(HtmlTextWriterStyle.MarginTop, top + "px"); 
      myDiv2.InnerHtml = "Filename: " + dt["Column2"].ToString() + "<br>" + myDiv2.ID; 
      PlaceHolder1.Controls.Add(myDiv2); 

      top = top + 140; 
      j = j + 1; 
     }

來源

2013-11-22 user3021239

代替把DIV拖動作爲jsPlumb.draggable的（$（「BG」））; 嘗試在其創建過程中使DIV可拖動。即

源事業部

 myDiv.ID = "FDiv" + j; 

     myDiv.Attributes.Add("class", "bg"); 
     myDiv.Style.Add(HtmlTextWriterStyle.MarginLeft, "30px"); 
     myDiv.Style.Add(HtmlTextWriterStyle.MarginTop, top + "px"); 
     myDiv.InnerHtml = "Filename: " + dt["Column1"].ToString() + "<br>" + myDiv.ID; 
     jsPlumb.draggable($('#FDiv' + j)); // make it draggable 
     PlaceHolder1.Controls.Add(myDiv);

` || y表示目標DIV

來源

2013-11-28 07:03:36 MrNobody

我曾與動態創建的div類似的問題，而不是利用jsPlumb.draggable（元素）解決了它但相反，jQuery和jsPumb.repaint（元素）如下（該示例有點矯枉過正，使用重繪但你得到的圖片）：

element.draggable({ 
    step: function() { 
     jsPlumb.repaint(element); 
    }, 
    drag:function(){ 
     jsPlumb.repaint(element); 
    }, 
    stop:function(){ 
     jsPlumb.repaint(element); 
    } 
});

希望這可以幫助你。

來源

2014-11-10 16:13:05 mkaran

如何在拖動動態創建的div時避免jsPlumb連接器斷開

回答

相關問題