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

Я новичок в jsPlumb. Я создал динамические элементы div, прочитав таблицу из базы данных, и подключил эти элементы div с помощью коннекторов JsPlumb. Дивы стали перетаскиваемыми. Соединители отображаются правильно при загрузке страницы, но когда я перетаскиваю или перемещаю элементы div, соединители разрываются и перемещаются вверх. Если я создаю статические элементы div, которые не поступают из базы данных, то соединители работают отлично, и когда я перетаскиваю/перемещаю элементы div, соединители также перемещаются вдоль элементов div, подключенных к исходным и целевым элементам 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"));
    });

Я жестко закодировал здесь источник и цель, которые позже я должен получить динамически, чтобы подключить все остальные div.

Вот динамический код div в коде позади.

foreach (DataRow dt в 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;
        }

connector jsplumb
person user3021239    schedule 22.11.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо того, чтобы сделать 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

person MrNobody007    schedule 28.11.2013

arrow_upward
0
arrow_downward

У меня была аналогичная проблема с динамически созданными 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);
    }
});

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

person mkaran    schedule 10.11.2014