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

Question

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

发生了什么。我有一个网站正在使用EasyUI，我试图向它添加一些jsPlumb连接，但是这些连接没有按照我希望的那样运行。

我准备一些演示与jsPlumb只和它的工作。但是当我把它添加到现有的网站连接不起作用。

在调查了冲突发生的地点后，我得出以下结论：

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

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

• 我无法通过拖动源endpoint创建新连接（我拖动endpoint，但现在创建了新连接）

我用JSFIDLE准备了两个演示来说明我的意思。这两个示例唯一不同的地方是jquery.easyui的外部资源

• 工作jsPlumb全屏结果
• 不工作：全屏结果

我怎样才能解决这个问题？也许你们中的一些人知道冲突在哪里。在这一点上，我的站点被建议将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);

部分原因是：

• endpoint不再可拖动-这很好，

此外，现在我发现EasyUI覆盖了jQuery draggable，这导致了这种奇怪的（对我来说）行为。遗憾的是，我对强制拖动方法作为原始jQuery方法存在问题。。。所以我期待着为我的问题找到其他解决方案

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

Answer 1

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

类似于if（..hasClass（'jsPlumbClass'））的返回

也许会有帮助。图书馆不知怎么地有冲突，对此我很抱歉。

Answer 2

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

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

Answer 3

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

这里发生的是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);
    });
});

其中，使用是加载模块的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，它们是：滑块、树、窗口、组合树、对话框、消息器。