Question

我尝试删除鼠标悬停时的连接，现在，我正在检查鼠标悬停时要删除的特定连接，然后单击垃圾桶图标覆盖删除它（鼠标悬停时连接上显示垃圾桶图标）。< / p>

我使用以下代码添加垃圾图标叠加层：

plumb.bind("connection", function (info, originalEvent) {
    var connection = info.connection;
    var overlay = connection.addOverlay(["Custom",{
        create:function(){ 
            return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
        },
        location:0.5,
        id:"delete-connection-new",
        cssClass : "delete-connection"
    }]);
    overlay.setVisible(false);
    connection.bind('mouseover',function(connection,originalEvent){
        overlay.setVisible(true);
        scope.conn_del = connection;
        console.log($scope.conn_del);
    });
    connection.bind('mouseout',function(connection,originalEvent){
        overlay.setVisible(false);
    });
}

要删除连接，请使用以下代码：

<code>
$(document).on('click','.delete-connection',function(){
            console.log(conn_del.component);
            plumb.detach(conn_del.component);
        });
</code>

当我删除连接但不保存流程图并返回相同的流程图时，当存在连接时，conn_del.component将返回null。

我将很快添加jsfiddle。在这方面的任何帮助将非常感激。

Answer 1

在叠加定义中添加以下点击事件处理程序代码可解决此问题：



var overlay = connection.addOverlay(["Custom",{
                create:function(){
                        return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
                    },
                    location:0.5,
                    id:"delete-connection-new",
                    cssClass : "delete-connection",
                    events:{
                        click:function(connection,originalEvent){
                            plumb.detach(connection.component);
                        }
                    }
            }]);

var overlay = connection.addOverlay(["Custom",{ create:function(){ return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">'); }, location:0.5, id:"delete-connection-new", cssClass : "delete-connection", events:{ click:function(connection,originalEvent){ plumb.detach(connection.component); } } }]);

分离操作jsplumb后，overlay对象中的组件字段返回null

1 个答案: