代码之家 › 专栏 › 技术社区 › cipher42

分离操作jsplum后,覆盖对象中的组件字段返回null

jsplumb jquery javascript

0

cipher42 · 技术社区 · 11 年前

我试图在mouseover上删除一个连接,现在,我正在检查要在mousever上删除的特定连接,然后单击垃圾箱图标覆盖(垃圾箱图标出现在mouseover上的连接上)将其删除。

我使用以下代码添加垃圾图标覆盖:

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。当存在连接时,组件返回null。

我很快就会为同样的内容添加jsfiddle。我们非常感谢在这方面的任何帮助。

1 回复 | 直到 11 年前

1

0

cipher42 11 年前

在覆盖定义中添加以下单击事件处理程序代码可以解决此问题:


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