Question

我有一个只有几个元素的简单块，我希望用户能够使用铅锤按需在各个元素之间进行连接。

我可以根据需要进行连接，但是当我将元素拖到其他位置时，连接器会留在同一位置，而不会与元素连接一起移动。

这里是现场演示Jsplumb demo，以隐身方式打开

视觉问题

这是js朋克：plunker plumb js demo source code

这是html

<!doctype html>

<html>

<head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
     <script src="lib/plumb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <div class="main-container tk-demo-canvas  statemachine-demo
        jtk-surface" id="canvas">

        <div id="context-menu-canvas">
            <ul class="menu-options">
                <li id="btn-add-movie-block" class="menu-option">Add movie block
                </li>
            </ul>

        </div>

        <div id="context-menu-movie-block">
            <ul class="menu-options">
                <li id="btn-add-movie-button" class="menu-option">Add Button</li>
            </ul>
        </div>
    </div>

    <textarea id="jsontextarea"></textarea>

    <script src="https://jsplumbtoolkit.com/community/demo/statemachine/lib/jsplumb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>
    <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</body>

</html>

这是动态添加的块和按钮的js，这是代码的一部分：

//function for adding movie block , a blcok which will contain a movie
function addMovieBlock2(id, left, top) {
    var newMovieBlock = $('<div class="movie-block">Block</div>');
    newMovieBlock.attr("movieid", id);
    newMovieBlock.attr("id", "movieblock" + id);
    newMovieBlock.css("left", left + "px");
    newMovieBlock.css("top", top + "px");
    $(".main-container").append(newMovieBlock);

    newMovieBlock.draggable({
        drag: function (event, ui) {
            updateJsonMovieBlockPosition($(event.target).attr("movieid"), ui.position.left, ui.position.top);
        }
    });
    //function to add button to json 
    jsonUpdate();
}

function addMovieButton2(movieid, id, left, top){
    var newMovieBlockButton = $("<div class='movie-button w'>Button<div class='ep' action='begin'></div><div>");

    newMovieBlockButton.attr("buttonid", id);
    newMovieBlockButton.attr("id", "moviebutton" + id);
    newMovieBlockButton.css("left", rightClickPosition.left.left + "px");
    newMovieBlockButton.css("top", rightClickPosition.left.top + "px");

    $("#movieblock" + movieid).append(newMovieBlockButton );

    newMovieBlockButton .draggable({
        containment: "parent",
        drag: function (event, ui) {
            updateJsonMovieBlockPosition($(event.target).attr("buttonid"), ui.position.left, ui.position.top);
        }
    });
}

您可以在插件中找到的CSS。

当我检查控制台日志时，出现以下错误

jsplumb.js：13896错误：属性高度：预期长度， “ -Infinity”。

我需要做些什么才能使它正常工作？任何帮助建议将不胜感激，谢谢

Plumb.js：错误：<svg>属性高度：预期长度，“-Infinity”

0 个答案: