Как избежать разъединения jsPlumb при перетаскивании динамически созданных divs

Question

Я новичок в jsPlumb. Я создал динамические divs, читая таблицу из базы данных, и я подключил эти divs с помощью JsPlumb-коннекторов. Дивы были перетянуты. Соединители отображаются правильно, когда страница загружается, но когда я перетаскиваю или перемещаю divs, разъемы размыкаются и перемещаются вверх. Если я создаю статические divs, которые не поступают из базы данных, тогда разъемы работают отлично, и когда я перетаскиваю/перемещаю div, тогда соединители также перемещаются по divs, связанным с исходными и целевыми div.

После полного поиска в 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")); 
    }); 

Я жёстко источник и цель здесь, который позже Я должен получать их динамически, чтобы соединить все остальные divs.

Вот динамический код divs в коде.

Еогеасп (DataRow дт в ds.Tables [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; 
     } 

Answer 1

Вместо того, чтобы сделать DIV перетаскиваемым, как jsPlumb.draggable ($ ("BG.")); Попробуйте сделать DIV перетаскиваемым во время его создания. т.е.

Источник 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); 

` || у для целевой DIV

Answer 2

У меня была аналогичная проблема с динамически создаваемыми дивы и решить ее, не используя jsPlumb.draggable (элемент) но вместо этого jQuery и jsPumb.repaint (элемент) следующим образом (пример немного переборчив с использованием перерисовки, но вы получите изображение):

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

Надеюсь, это вам поможет.