gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:26:28 26 4
gpt4 key购买 nike

我需要连接可拖动和可调整大小<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 resizing元素也以 dragging 开头它。

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

我尝试了以下方法:

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

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

然后绘制线条,但不跟随调整大小/拖动元素的移动。

有人可以告诉我如何让该示例与新版本一起使用吗?非常感谢

最佳答案

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

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

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

关于javascript - JSPlumb v1.4.1 可拖动/可调整大小的示例不再适用于 v2.0.7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39471109/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com