加載jQuery EasyUI後jsPlumb無法正常工作（jQueryUI和EasyUI之間的衝突）

我遇到了jsPlumb和jQuery EasyUI的問題。加載jQuery EasyUI後jsPlumb無法正常工作（jQueryUI和EasyUI之間的衝突）

這裏發生了什麼。我有一個使用EasyUI的網站，我試圖向它添加一些jsPlumb連接，並且這種連接並不像我想要的那樣執行。

我只準備了一些使用jsPlumb的演示程序，它正在工作。但是，當我將它添加到現有的網站連接不起作用。

調查後，哪裏是我來到這個衝突：

jsPlumb工作，只要我不加載EasyUI。裝載EasyUI後：

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

我不能拖動源端點（我拖累了點，但現在正在創建新的連接）
終點不按他們屬於DIV創建新的連接（他們將自己定位正確當你用鼠標點他們）

我準備2個演示使用jsFiddle來展示我的意思。唯一覺得不同這兩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可拖動，這導致這種奇怪的（對我來說）行爲。可悲的是，我有力量拖動方法的問題是原來的jQuery的方法。所以我很期待其他解決方案，爲我的問題

編輯：我刪除一切EasyUI與拖動和dropable覆蓋和連接它的工作。現在的問題是如何在程序中做到這一點，而不是在easyui腳本中，因爲有人會更新到新版本，一切都將停止工作...

來源

2013-03-20 mbochynski

嘗試更改文件的順序，把jsPlumb EasyUI後。 – 2013-03-20 13:43:27

可悲的是，沒有任何區別...嘗試了所有的可能性 – mbochynski 2013-03-20 13:47:28

有一個jsPlumb處理EasyUI的分支。也許這有幫助？ https://github.com/KodingSykosis/jsPlumb/commits/master – koppor 2013-05-04 13:08:32

好的。對我來說，這是最好的工作解決方案。

這裏發生的事情是，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。

來源

2013-03-25 12:15:09 mbochynski

老鼠，我需要使用easyui-tree和jsplumb： -/ – GreyCloud 2013-09-10 13:07:29

我最終使用treegrids，因爲我必須在其中放置一些更多的信息... – mbochynski 2013-10-12 06:33:41

最後，我放棄了easyui，並去了另一個lib – GreyCloud 2013-10-15 13:40:47

覆蓋EasyUI $.fn.draggable。嘗試檢測this上的jsPlumb類，並防止操縱jsPlumb節點。

喜歡的東西if(....hasClass('jsPlumbClass')) return;

可能的幫助。不知何故，圖書館發生衝突，對此感到遺憾。

來源

2013-03-20 14:01:30

我會嘗試按照您的建議覆蓋，感謝您的回覆。 – mbochynski 2013-03-20 14:13:22

我編輯了這個問題，並添加了我所嘗試的，以及爲什麼這不適合我。 – mbochynski 2013-03-21 12:21:19

有一個處理EasyUI的jsPlumb分支。也許這有幫助？ http://github.com/KodingSykosis/jsPlumb/commits/master

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

來源

2013-05-07 19:57:46 koppor

this doesn對我來說似乎沒有用： -/ – GreyCloud 2013-09-10 13:19:17

爲什麼它不適合你？仍然存在可拖動和可拖動的衝突？ – mbochynski 2013-10-12 06:33:01

是的我在初始化過程中仍然收到錯誤，最後我丟棄了easyui並去了另一個lib – GreyCloud 2013-10-15 13:42:05

加載jQuery EasyUI後jsPlumb無法正常工作（jQueryUI和EasyUI之間的衝突）

回答

相關問題