Question

我需要使用JSPlumb连接可拖动和可调整大小的<div>元素。我正在看这个tutorial它使用JSPlumb的v1.4.1。我有一个非常简单的代码作为tutorial中的示例：

    <!DOCTYPE html>
<html ng-app="">
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

    <style>
        #diagramContainer {
            padding: 20px;
            width:80%; height: 400px;
            border: 1px solid gray;
        }

        .item {
            position: absolute;
            height:80px; width: 80px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>

    <div id="diagramContainer">
        <div id="item_left" class="item"></div>
        <div id="item_right" class="item" style="left:150px;"></div>
    </div>

    <p><a href="http://www.freedevelopertutorials.com/jsplumb-tutorial/introduction/">Visit the full jsPlumb-Tutorial</a> to learn it and see many more interesting examples.</p>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>

    <script>
        $(".item").resizable({
        resize : function(event, ui) {            
                jsPlumb.repaint(ui.helper);
            }
        });

        jsPlumb.ready(function() {           

            jsPlumb.connect({
                source:"item_left",
                target:"item_right",
                endpoint:"Rectangle"
            });

            jsPlumb.draggable("item_left");
            jsPlumb.draggable("item_right");
        });
    </script> 

</body>
</html>

（这是一个类似于演示的jsFiddle：http://www.freedevelopertutorials.com/jsplumb-tutorial/examples/jsplumb-resizable-divs-example/代码）

如果我将上面的示例代码中的JSPlumb版本从v1.4.1切换到v2.0.7 resizing，则元素也会启动它dragging。

我发现了以下stackoverflow问题jsPlumb issue using drag and resize，但我无法理解答案。

我尝试了以下内容：

不使用jsPlumb.draggable("item_left");而只是

        $(".item").draggable({
        drag: function (event, ui) {
            jsPlumb.repaint(ui.helper);
        }
    });

然后该线被绘制但不跟随调整大小/拖动物品的移动。

有人可以告诉我如何使用新版本的示例吗？ 非常感谢

Answer 1

对于较新版本的JsPlumb，该错误仍然存在。在这种情况下，只需在拖动选项中使用过滤器选项即可。

jsPlumb.draggable((element), {
   filter: ".ui-resizable-handle"
});

https://github.com/jsplumb/katavorio/wiki#filtering

JSPlumb v1.4.1 draggable / resizable示例不再适用于v2.0.7

1 个答案: