JSPlumb v1.4.1 可拖动/可调整大小的示例不再适用于 v2.0.7答案

【问题标题】：JSPlumb v1.4.1 draggable/resizable example not working anymore with v2.0.7JSPlumb v1.4.1 可拖动/可调整大小的示例不再适用于 v2.0.7
【发布时间】：2016-09-13 13:17:04
【问题描述】：

我需要将可拖动和可调整大小的<div> 元素与 JSPlumb 连接起来。我在看这个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 resizingan 元素也会以 draggingit 开头。

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

我尝试了以下方法：

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

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

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

谁能告诉我如何让示例与新版本一起使用？ 非常感谢

【问题讨论】：

标签： javascript jquery jquery-ui jsplumb

【解决方案1】：

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

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

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

【讨论】：