jquery - 加载 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(当您用鼠标指向它们时，它们会将自己定位在正确的位置)

我使用 jsFiddle 准备了 2 个演示来展示我的意思。唯一认为这两个示例不同的是 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 Draggable，这导致了这种奇怪的(对我来说)行为。遗憾的是，我在强制拖动方法成为原始 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 、树、窗口、组合树、对话框、消息器。