2

jsPlumbとjQueryEasyUIで実際の問題が発生しました。

ここで何が起こりますか。EasyUIを使用しているWebサイトがあり、それにjsPlumb接続を追加しようとしましたが、この接続が希望どおりに動作していません。

jsPlumbのみを使用してデモを準備しましたが、機能しています。しかし、既存のサイトに追加すると、接続が機能しません。

紛争がどこにあるかを調査した後、私はこれに行き着きました：

EasyUIをロードしない限り、jsPlumbは機能します。EasyUIをロードした後：

    <script type="text/javascript" src="jquery.easyui.min.js"></script>
  • ソースエンドポイントをドラッグして新しい接続を作成できません（エンドポイントをドラッグしましたが、新しい接続が作成されました）
  • エンドポイントは、それらが属するdivには従いません（マウスでポイントすると、エンドポイントは正しく配置されます）

jsFiddleを使用して2つのデモを準備し、意味を示します。この2つのサンプルが異なるのは、jquery.easyuiの外部リソースだけだと思います。

どうすればこれを解決できますか？たぶんあなたの何人かはどこが対立しているのか知っています。私のサイトは、この時点で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をオーバーライドし、これがこの奇妙な（私にとって）振る舞いを引き起こします。悲しいことに、ドラッグ可能なメソッドを元のjQueryメソッドにすることに問題があります...だから、私の問題に対する他の解決策を楽しみにしています

編集：EasyUIとその動作でドラッグ可能およびドロップ可能オーバーライドに関連するすべてを削除します。問題は、easyuiスクリプトではなくプログラムでこれを行う方法です。誰かが新しいバージョンに更新し、すべてが機能しなくなるためです...

4

3 に答える 3

3

わかった。これが私にとって最良の解決策です。

ここで起こったことは、EasyUIのドラッグ可能でドロップ可能なメソッドがjQueryUIメソッドをオーバーライドすることです。jsPlumbは、EasyUIではなくjQueryUIで動作するように設計されています。

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するイージーローダー関数です。initAllEasyUIコンポーネントのすべての初期化が例である私の関数です：

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 に答える