加载 jQuery EasyUI 后 jsPlumb 不工作（jQueryUI 和 EasyUI 之间的冲突）

Question

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

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

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

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

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

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

• 我无法通过拖动源端点创建新连接（我拖动端点但现在创建了新连接）
• 端点不跟随它们所属的 div（当您用鼠标指向它们时它们会正确定位）

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

• 工作 jsPlumb Full Screen Result
• 不工作：Full Screen Result

我该如何解决这个问题？也许你们中的一些人知道冲突在哪里。我的网站现在打算将 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 脚本中执行此操作，因为有人会更新到新版本并且一切都将停止工作......

Answer 1

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

这里发生的事情是 EasyUI 的可拖动、可拖放方法覆盖了 jQueryUI 方法。 jsPlumb 旨在与 jQueryUI 一起工作，而不是与 EasyUI 一起工作。

我发现 EasyUI 框架提供了方法easyloader，可以让你选择要加载的模块！伟大的！我必须稍微更改我的代码，从 *.html 文档中删除与 EasyUI 相关的所有内容（因为在创建 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 版本，它们是：slider、tree、window、combotree、dialog、messager。

Answer 2

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

可通过https://github.com/KodingSykosis/jsPlumb/tree/master/demo/jeasyui获取演示资源

Answer 3

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

类似if(....hasClass('jsPlumbClass') ) return;

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