更改jsPlumb已删除元素的文本

I have created an application where elements from the toolbox can be dragged and dropped onto a canvas and their properties can be set as soon as they are dropped. But, I have an instance where when the "stream ui-draggable" element is dropped on the canvas I disable the canvas and the toolbox and display a properties panel where the user can select a predefined stream for the newly dropped element and also give it another name under the "as : " text field. This name should then replace the currently displayed- disabled name "Element" with the name provided bu the user. Is there a way that I can replace this text in the dropped element.

我创建了一个应用程序,可以将工具箱中的元素拖放到画布上,并且可以在删除它们的属性后立即设置它们的属性。但是,我有一个实例,当画布上放下“流ui-draggable”元素时,我禁用画布和工具箱并显示一个属性面板,用户可以在其中为新删除的元素选择预定义的流并给它“as:”文本字段下的另一个名称。然后,此名称应使用用户提供的名称替换当前显示的禁用名称“Element”。有没有办法可以在被删除的元素中替换此文本。

js function:

drop: function (e, ui) {

        var dropElem = ui.draggable.attr('class');
        droppedElement = ui.helper.clone();
        ui.helper.remove();
        $(droppedElement).removeAttr("class");
        jsPlumb.repaint(ui.helper);

        if(dropElem=="stream ui-draggable")
        {
            var newAgent = $('<div>').attr('id', i).addClass('streamdrop');
            //alert("newAgent ID: "+newAgent.attr('id'));
            clickedId = newAgent.attr("id");
            alert("clicked ID: "+i);

            createStreamForm();
            $("#container").addClass("disabledbutton");
            $("#toolbox").addClass("disabledbutton");
            $(droppedElement).draggable({containment: "container"});

            var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
            var finalElement= newAgent.text("Element").append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);

            //Increment the Element sequence number
            i++; r++; q++;

            var l = ($(finalElement).attr('id'));
            alert("Final elm id: "+finalElement.attr('id'));
            var connection = $('<div>').attr('id', l + '-' + q).addClass('connection');

            finalElement.css({
                'top': e.pageY,
                'left': e.pageX
            });

            finalElement.append(connection);


            $('#container').append(finalElement);

            jsPlumb.draggable(finalElement, {
                containment: 'parent'
            });


            jsPlumb.makeTarget(connection, {
                anchor: 'Continuous'
            });

            jsPlumb.makeSource(connection, {
                anchor: 'Continuous'
            });

        }

The createStreamForm() function:

createStreamForm()函数:

var importDiv, iStreamtype, br, istreamlbl, istreamtypelbl, iPredefStreamdiv, istreamDefLineDiv, istreamDefDivx, istreamName, importbtn;
var exportDiv,eStreamtype, estreamlbl, estreamtypelbl, ePredefStreamdiv, estreamDefLineDiv, estreamDefDivx, estreamName, exportbtn;
var streamDiv, streambtn;
var definestreamdiv,inputval;


function createStreamForm()
{
    $(".toolbox-titlex").show();
    $(".panel").show();


    //For the Import Form
    importDiv = document.createElement("div");
    iStreamtype = document.createElement("div");
    br = document.createElement("br");
    istreamlbl = document.createElement("label");
    istreamtypelbl = document.createElement("label");
    iPredefStreamdiv = document.createElement("div");
    istreamDefLineDiv = document.createElement("div");
    istreamDefDivx = document.createElement("div");
    istreamName = document.createElement("input");
    importbtn = document.createElement("button");

    importDiv.className = "importdiv";
    importDiv.id = "importdiv";
    istreamlbl.className = "lblfloat-left";
    br.className = "br-div";
    istreamlbl.innerHTML = "Stream:";
    iPredefStreamdiv.id = "PredefinedStream1";
    istreamDefDivx.className = "streamDefDiv";
    istreamDefDivx.id = "streamDefLineDiv";
    istreamName.className = "panel-input-streamName";
    istreamName.id = "istreamName";
    istreamName.placeholder = "as : ";
    importbtn.type = 'button';
    importbtn.innerHTML = "Import";
    importbtn.className = "btn-import";
    importbtn.setAttribute("onclick","storeImportStreamInfo()");

    importDiv.appendChild(iStreamtype);
    importDiv.appendChild(istreamlbl);
    importDiv.appendChild(istreamtypelbl);
    importDiv.appendChild(iPredefStreamdiv);
    importDiv.appendChild(br);
    importDiv.appendChild(istreamDefLineDiv);
    importDiv.appendChild(istreamDefDivx);
    importDiv.appendChild(br);
    importDiv.appendChild(istreamName);
    importDiv.appendChild(br);
    importDiv.appendChild(importbtn);
    importDiv.appendChild(br);


    //For the Export Form
    exportDiv = document.createElement("div");
    eStreamtype = document.createElement("div");
    br = document.createElement("br");
    estreamlbl = document.createElement("label");
    estreamtypelbl = document.createElement("label");
    ePredefStreamdiv = document.createElement("div");
    estreamDefLineDiv = document.createElement("div");
    estreamDefDivx = document.createElement("div");
    estreamName = document.createElement("input");
    exportbtn = document.createElement("button");

    exportDiv.className = "exportdiv";
    exportDiv.id = "exportdiv";
    estreamlbl.className = "lblfloat-left";
    estreamlbl.innerHTML = "Stream:";
    ePredefStreamdiv.id = "PredefinedStream2";
    estreamDefDivx.className = "streamDefDiv";
    estreamDefDivx.id = "streamDefLineDiv";
    estreamName.className = "panel-input-streamName";
    estreamName.id = "panel-input-streamName";
    estreamName.placeholder = "as : ";
    exportbtn.type = 'button';
    exportbtn.innerHTML = "Export";
    exportbtn.className = "btn-export";


    exportDiv.appendChild(estreamlbl);
    exportDiv.appendChild(estreamtypelbl);
    exportDiv.appendChild(ePredefStreamdiv);
    exportDiv.appendChild(br);
    exportDiv.appendChild(estreamDefLineDiv);
    exportDiv.appendChild(estreamDefDivx);
    exportDiv.appendChild(br);
    exportDiv.appendChild(estreamName);
    exportDiv.appendChild(br);
    exportDiv.appendChild(exportbtn);
    exportDiv.appendChild(br);

    //For the Stream Form

    streamDiv = document.createElement("div");
    streambtn =  document.createElement("button");
    definestreamdiv = document.createElement("div");
    inputval = document.createElement("div");
    streambtn.type = 'button';
    streamDiv.className = "streamdiv";
    streamDiv.id = "streamdiv";

    streambtn.innerHTML = "Define Stream";
    streambtn.className = "btn-define-stream";
    streambtn.setAttribute("onclick","createattribute()");
    //inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
    streamDiv.appendChild(streambtn);
    definestreamdiv.appendChild(inputval);

    lot.appendChild(importDiv);
    createattr();
    lot.appendChild(exportDiv);
    lot.appendChild(streamDiv);
    lot.appendChild(definestreamdiv);

}

storeImportStreamInfo() Function:

var clickcount=1;

function storeImportStreamInfo()
{
    var choice=document.getElementById("streamSelect");
    var selectedStream = choice.options[choice.selectedIndex].text;
    var asName= document.getElementById("istreamName").value;
    var StreamElementID = clickcount;
    clickcount++;

    createdImportStreamArray[clickedId][0]=StreamElementID;
    createdImportStreamArray[clickedId][1]=selectedStream;
    createdImportStreamArray[clickedId][2]=asName;

    y++;
}

1 个解决方案

#1

Solved it by passing the newly dropped jsPlumb object to the storeImportStreamInfo() as parameters and set the text within the method. Also this parameter needs to be carried through all the functions through which it progresses before achieving the storeImportStreamInfo() method.

通过将新删除的jsPlumb对象作为参数传递给storeImportStreamInfo()并在方法中设置文本来解决此问题。此参数还需要在实现storeImportStreamInfo()方法之前通过其进行的所有函数来执行。

Eg:

function createStreamForm(newAgent,i)

within this function->

在这个功能中 - >

importbtn.onclick = function() {
            storeImportStreamInfo(newAgent,i);
        }

and so on. In the storeImportStreamInfo() function, I've added the lines that append the icons and the text to the dropped Element.

等等。在storeImportStreamInfo()函数中,我添加了将图标和文本附加到已删除元素的行。

var prop = $('<a class="streamproperty" onclick="doclick(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
        newAgent.text(asName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(prop);

#1

Eg:

function createStreamForm(newAgent,i)