更改 jsPlumb 放置元素的文本

Question

我创建了一个应用程序，其中可以将工具箱中的元素拖放到 canvas 上，并且可以在拖放后立即设置它们的属性。但是，我有一个实例，当 "stream ui-draggable" 元素放在 canvas 上时，我禁用 canvas 和工具箱并显示一个属性面板，用户可以在其中 select a为新删除的元素预定义流，并在 "as : " 文本字段下为其指定另一个名称。然后，此名称应将当前显示的禁用名称 "Element" 替换为用户提供的名称。有什么方法可以替换掉落元素中的这段文字吗？

js 函数：

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

        }

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() 函数：

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

Answer 1

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

例如：

function createStreamForm(newAgent,i)

在此函数内->

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

等等。在 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);

更改 jsPlumb 放置元素的文本

Change the Text of a jsPlumb dropped element

javascript

text

canvas

rename

jsplumb