Question

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

这里发生了什么。我有一个使用EasyUI的网站，我试图添加一些jsPlumb连接到它，这种连接不像我希望他们那样做。

我只使用jsPlumb准备一些演示并且它正在工作。但是当我将它添加到现有站点时，连接无法正常工作。

在调查冲突在哪里后，我来到这里：

只要我不加载EasyUI，jsPlumb就会正常工作。加载EasyUI后：

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

我无法通过拖动源端点创建新连接（我拖动端点但现在创建了新连接）
端点不遵循它们所属的div（当您通过鼠标指向它们时，它们的位置正确）

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

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

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

编辑：

正如所建议的那样，我试图覆盖可拖动但部分工作但不是我想要的。

(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及其工作中与draggable和dropable override相关的所有内容。现在问题是如何在程序中执行此操作而不是在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版，它们是：滑块，树，窗口，combotree，对话框，消息器。

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;

这样的东西

可能有所帮助。图书馆有些冲突，对此感到抱歉。

加载jQuery EasyUI后jsPlumb无效（jQueryUI和EasyUI之间的冲突）

3 个答案: