如何避免jsPlumb连接器在拖动动态创建的div时断开答案

【问题标题】：How to avoid jsPlumb connectors break off while dragging the dynamically created divs如何避免jsPlumb连接器在拖动动态创建的div时断开
【发布时间】：2013-11-22 13:36:52
【问题描述】：

我是 jsPlumb 的新手。我通过从数据库中读取表创建了动态 div，并使用 JsPlumb 连接器连接了这些 div。 div 已被制成可拖动的。页面加载时连接器正确显示，但是当我拖动或移动 div 时，连接器断开并移动到顶部。如果我创建一个不是来自数据库的静态 div，则连接器工作正常，当我拖动/移动 div 时，连接器也会沿着连接到源和目标 div 的 div 移动。

在谷歌上进行完整搜索并浏览 jsPlumb 文档后，我没有找到任何解决方案。

谁能告诉我应该怎么做才能让连接器保持连接到源和目标，即使我们拖动或移动 div 也是如此。

这是我所做的：

一个连接的JsPlumb代码：

jsPlumb.ready(function() {

                 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。

这是后面代码中的动态div代码。

foreach（ds.Tables[0].Rows 中的 DataRow dt） {

            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;
        }

【问题讨论】：

标签： connector jsplumb

【解决方案1】：

而不是使 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

【讨论】：

【解决方案2】：

我在动态创建的 div 中遇到了类似的问题，并通过不使用 jsPlumb.draggable(element) 而是使用 jQuery 和 jsPumb.repaint(element) 来解决它，如下所示（使用 repaint 的示例有点过头了，但你获取图片）：

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

希望对你有所帮助。

【讨论】：