2

我遇到了 jsPlumb 和 jQuery EasyUI 的真正问题。

这里会发生什么。我有一个使用 EasyUI 的网站，我试图向它添加一些 jsPlumb 连接，但这些连接并没有像我希望的那样运行。

我只用 jsPlumb 准备了一些演示，它正在工作。但是当我将它添加到现有站点时，连接不起作用。

在调查了冲突在哪里之后，我得出了这个结论：

只要我不加载 EasyUI，jsPlumb 就可以工作。加载 EasyUI 后：

    <script type="text/javascript" src="jquery.easyui.min.js"></script>
  • 我无法通过拖动源端点来创建新连接（我拖动端点但现在创建了新连接）
  • 端点不遵循它们所属的 div（当您用鼠标指向它们时，它们会正确定位它们）

我使用 jsFiddle 准备了 2 个演示来说明我的意思。唯一认为这两个示例不同的是 jquery.easyui 的外部资源

我该如何解决这个问题？也许你们中的一些人知道冲突在哪里。我的网站现在建议将 EasyUI 更改为其他任何东西，我真的很想使用 jsPlumb，因为我找不到任何像这样强大的工具包。

编辑：

正如建议的那样，我试图覆盖 draggable 并且它部分工作但不是我想要的那样。

(function($){
    var __old_draggable = $.fn.draggable;
    $.fn.draggable = function(){
        if(this.hasClass('_jsPlumb_endpoint') || this.hasClass('window')){
            return;
        }
        return __old_draggable.apply(this, arguments);
    };
    $.extend($.fn.draggable,__old_draggable);
})(jQuery);

部分原因是：

  • 端点不再可拖动 - 这很好，
  • 但是他们不会创建新的连接，这很糟糕。
  • 他们不遵循他们所附的窗口。

此外，现在我现在，EasyUI 覆盖了可拖动的 jQuery，这导致了这种奇怪的（对我而言）行为。可悲的是，我有强制可拖动方法成为原始 jQuery 方法的问题......所以我期待其他解决方案来解决我的问题

编辑：我删除了 EasyUI 中与可拖放覆盖相关的所有内容及其工作。现在的问题是如何在程序中而不是在easyui脚本中执行此操作，因为有人会更新到新版本并且一切都将停止工作......

4

3 回答 3

3

好的。这是对我来说最好的工作解决方案。

这里发生的事情是 EasyUI 可拖动、可放置的方法覆盖了 jQueryUI 方法。jsPlumb 被设计为与 jQueryUI 一起使用，而不是与 EasyUI 一起使用。

我发现 EasyUI 框架提供方法easyloader允许您选择要加载的模块！伟大的！我必须稍微更改我的代码，从文档中删除与 EasyUI 相关的所有*.html内容（因为在创建 DOM 时不知道 EasyUI 模块）。

在 HTML 文件的地方

<script type="text/javascript" src="jquery-easyui-1.3.2/easyloader.js"></script>

代替

<script type="text/javascript" src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

然后在你的javascript中我做了这样的事情：

$(function () {
    using(['panel', 'datetimebox', 'tabs', 
            'accordion', 'layout', 'linkbutton',
            'datagrid'], function(){
        initAll.call(this);
    });
});

哪里using是一个加载模块的easyloader函数。initAll是我的函数，其中 EasyUI 组件的所有初始化都是例如：

var initAll = function () {
    //initialize all html elements which uses EasyUI
    $('#layout').layout({fit:true});
    $('#tabscontainer').tabs({fit:true, border:false});
    $('#accordion').accordion({fit: true, border:false});
}

您必须注意的唯一一件事是您不能使用依赖于可拖动/可放置模块的模块来使 jsPlumb 正常工作。可以在 easyloader.js 源代码中找到依赖项。对于 EasyUI 1.3.2 版本，它们是：滑块、树、窗口、组合树、对话框、消息器。

于 2013-03-25T12:15:09.540 回答
1

有一个处理 EasyUI 的 jsPlumb 的分支。也许这有帮助？http://github.com/KodingSykosis/jsPlumb/commits/master

演示源可在https://github.com/KodingSykosis/jsPlumb/tree/master/demo/jeasyui获得

于 2013-05-07T19:57:46.457 回答
0

覆盖 EasyUI $.fn.draggable。尝试检测 jsPlumb 类this并防止操作 jsPlumb 节点。

就像是if(....hasClass('jsPlumbClass') ) return;

可能有帮助。图书馆不知何故发生了冲突，对此感到抱歉。

于 2013-03-20T14:01:30.250 回答