在 dblclick 上删除 JsPlumb 节点

Question

我基本上想要 3 个按钮，每个添加 1 个不同的元素（已经工作），这个元素有起点和终点，当你双击一个元素时，我希望它删除整个元素和连接，这段代码是这样做的：

      instance.detachAllConnections("Service1");
      instance.remove("Service1");

但我无法让它在双击事件中工作...这是我目前得到的 js 代码：

    var instanceJsPlumb = null;

    jsPlumb.ready(function () {

    var instance = jsPlumb.getInstance({
        DragOptions: {cursor: 'pointer', zIndex: 2000},

       ConnectionOverlays: [
           ["Arrow", {location: 1}],
       ],
      Container: "sem-dia"
    });

   instanceJsPlumb = instance;

   var basicType = {
         connector: "StateMachine",
       paintStyle: {strokeStyle: "red", lineWidth: 4},
       hoverPaintStyle: {strokeStyle: "blue"},
       overlays: [
        "Arrow"
     ]
  };
   instance.registerConnectionType("basic", basicType);


   var connectorPaintStyle = {
           lineWidth: 4,
           strokeStyle: "grey",
           joinstyle: "round",
           outlineColor: "white",
           outlineWidth: 2
       },

      connectorHoverStyle = {
          lineWidth: 4,
          strokeStyle: "#216477",
          outlineWidth: 2,
          outlineColor: "white"
      },
    endpointHoverStyle = {
        fillStyle: "#216477",
        strokeStyle: "#216477"
    },

    sourceEndpoint = {
        endpoint: "Dot",
        maxConnections: -1,
        paintStyle: {strokeStyle: "#7AB02C", fillStyle: "transparent", radius: 7, lineWidth: 3},
        isSource: true,
        connector: ["Flowchart", {stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true}],
         connectorStyle: connectorPaintStyle,
         hoverPaintStyle: endpointHoverStyle,
         connectorHoverStyle: connectorHoverStyle,
         dragOptions: {},
         overlays: [

        ]
    },
      targetEndpoint = {
         endpoint: "Dot",
         paintStyle: {fillStyle: "#7AB02C", radius: 11},
          hoverPaintStyle: endpointHoverStyle,
         maxConnections: -1, 
         dropOptions: {hoverClass: "hover", activeClass: "active"},
         isTarget: true,
         overlays: [
         ]
     },
     init = function (connection) {
     };

 var _addEndpoints = function (toId, sourceAnchors, targetAnchors) {

     for (var i = 0; i < sourceAnchors.length; i++) {
         var sourceUUID = toId + sourceAnchors[i];
         instance.addEndpoint(toId, sourceEndpoint, {anchor: sourceAnchors[i], uuid: sourceUUID});
     }
     for (var j = 0; j < targetAnchors.length; j++) {
         var targetUUID = toId + targetAnchors[j];
         instance.addEndpoint(toId, targetEndpoint, {anchor: targetAnchors[j], uuid: targetUUID});
     }
 };

    instance.batch(function () {

      var dia = $("#sem-dia");
      var arr = [];
      $.each(components, function (i, component) {
          if(component.type === 'q'){
              arr.push("<div class='window questions' id='");

          }else{
              if(component.type === 'a'){
                 arr.push("<div class='window answers' id='");
              }else{
                  arr.push("<div class='window other' id='");
              }
          }
          arr.push(component.id);
          arr.push("' style='top: ");
          arr.push(component.y);
          arr.push("px; left: ");
          arr.push(component.x);
          arr.push("px;'> <strong>");
          arr.push(component.name);
          arr.push("</strong><br/><br/> </div>");
      });
      dia.append(arr.join(''));

      $.each(components, function (i, component) {
          _addEndpoints(component.id, ["BottomCenter"], ["TopCenter"]);
      });

      instance.bind("connection", function (connInfo, originalEvent) {
          init(connInfo.connection);
      });

      instance.draggable($("#sem-dia").find("div.window"), {grid: [20, 20]});

      $.each(links, function (i, link) {
          instance.connect({uuids: [link.src + "BottomCenter", link.dst + "TopCenter"],
              editable: true});

      });



      instance.bind("click", function (conn, originalEvent) {
          if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
             instance.detach(conn);
              conn.toggleType("basic");
      });

      instance.bind("connectionDrag", function (connection) {
          console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
      });

      instance.bind("connectionDragStop", function (connection) {
          console.log("connection " + connection.id + " was dragged");
      });

      instance.bind("connectionMoved", function (params) {
          console.log("connection " + params.connection.id + " was moved");
      }); 

      //This code in a function for any element with a dblclick event that pops an alert and if you press yes it deletes that node and his connections
        //instance.detachAllConnections("Service1");
        //instance.remove("Service1");
  });

       var cont=2;
   $("#botonNewService").mousedown(function(event) {
      var id = "Service" + cont ;
      cont++;
      $("#sem-dia").append("<div class='window other' id='" + id +
      "' style='top: 10em; left: 0em;'><strong>Añadir External Service</strong><br/><br/></div>");
      _addEndpoints(id, ["BottomCenter"], ["TopCenter"]);

      instance.draggable($("#"+id), {containment:true});
      instance.trigger($("#"+id), "mousedown");
      instance.trigger(document, "mousemove");
  });
      var cont2=2;
  $("#botonNewQuestion").mousedown(function(event) {
      var id2 = "Pregunta" + cont2 ;
      cont2++;
      $("#sem-dia").append("<div class='window questions' id='" + id2 +
    "' style='top: 20em; left: 0em;'><strong>Pregunta usuarios</strong><br/><br/></div>");
    _addEndpoints(id2, ["BottomCenter"], ["TopCenter"]);

    instance.draggable($("#"+id2), {containment:true});
    instance.trigger($("#"+id2), "mousedown");
    instance.trigger(document, "mousemove");
});
    var cont3=3;
$("#botonNewAnswer").mousedown(function(event) {
    var id3 = "Respuesta" + cont3;
    cont3++;
    $("#sem-dia").append("<div class='window answers' id='" + id3 +
    "' style='top: 30em; left: 0em;'><strong>Respuesta sistema</strong><br/><br/></div>");
    _addEndpoints(id3, ["BottomCenter"], ["TopCenter"]);

    instance.draggable($("#"+id3), {containment:true});
    instance.trigger($("#"+id3), "mousedown");
    instance.trigger(document, "mousemove");
});


jsPlumb.fire("jsPlumbLoaded", instance);

 });

   $("#botonSave").click(function(){
var components_save = [];
$("#sem-dia").find("div.window").each(function (index) {
    var type = "o";
    if($(this).hasClass("questions")){
        type = "q";
    }else{
        if($(this).hasClass("answers")){
            type = "a";
        }
    }
    var position = $(this).position();
    components_save.push({"id": $(this).attr( "id"), "name": $(this).find("strong").text(), "type": type,
        "x": position.left, "y": position.top})
});

var links_save = [];
if(instanceJsPlumb != null){
    $.each(instanceJsPlumb.getAllConnections(), function (i, connection) {
        links_save.push({"src": connection.sourceId, "dst": connection.targetId})
    });
}

$("#result").text(JSON.stringify({"components":components_save, "links":links_save}))
 });

由于代码是创建新元素删除连接并创建新元素，如果有人能告诉我如何删除元素及其与 dblclick 上的函数的连接，我将非常感激....

Answer 1

您可以通过双击删除带有 id="target" 的 jsPlumb 元素：

$("#target").dblclick(function() {
  instance.remove($(this));
});

其中 instance = jsPlumb.getInstance(...

Answer 2

因为元素是动态创建的。每次创建新元素时，您都必须显式添加 dblclick 处理程序。另一种方法（首选）是将 dblclick 附加到 document 上，如下所示：

$(document).on('dblclick','.window',function(){
    instance.remove($(this));
    //other logic goes here...
});

在 dblclick 上删除 JsPlumb 节点

Delete JsPlumb node on dblclick

jquery

jsplumb