Question

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

在Google上进行完整搜索并浏览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;
        }

Answer 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

Answer 2

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

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

希望这会对你有所帮助。

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

2 个答案: