如何使用jsplumb动态地将achors，链接和端点添加到元素？

Question

我使用jsplumb从一个div中拖动一个元素并将其放到另一个div中。它工作正常。这是我的代码：

var counter = 0;
var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});
$(".droppable").droppable({
            accept: '.drag',
            activeClass: "drop-area",
            drop: function(e, ui) {
                    if ($(ui.draggable)[0].id !== "") {
                        x = ui.helper.clone();
                        <!--  ui.helper.remove(); -->
                        x.draggable({
                            helper: 'original',
                            cursor: 'move',
                            containment: '.droppable',
                            tolerance: 'fit',
                            drop: function(event, ui) {
                                $(ui.draggable).remove();
                            }
                        });

我创建了另一个例子，我创建了四个块，并通过使用jsplumb动态链接它们来连接它们。类似的工作示例位于链接https://jsplumbtoolkit.com/community/demo/flowchart/index.html

中

现在我想整合这两个。我想拖放并动态创建它们之间的链接，锚点和端点。怎么做？