2013-12-19 31 views
0

我使用mulisortable jQuery插件(github.com/shvetsgroup/jquery.multisortable)與mcustomscrollbar插件(manos.malihu.gr/jquery-custom-content-scroller),我遇到了麻煩顯示海關欄容器「過度」的拖動項目。jQuery Multisortable與CustomScrollBar

作爲一個例子,我有4個獨立的容器,它們使用自定義滾動條,並且在這些容器的每個容器中,我有多個由multisortable插件連接的列表。我可以將選定的項目從一個容器中的列表拖動到另一個容器中的列表中,但是由於自定義滾動條將overflow:hidden添加到其容器中,因此拖動的項目位於列表/容器「後面」。

我的問題是:如何使拖動的項目出現在容器的前

事情我已經嘗試:

  • 我已刪除從滾動條,它做什麼的overflow:hidden性質我想要,但是當滾動時,滾動的內容出現在容器的外面,這不好。
  • 我已經嘗試在multisortable選項中使用helper:"clone"設置,但這似乎只克隆一個項目(而不是多個),而我的始發列表css會做出意想不到的事情。
  • 我也試過在那些被選中的項目上設置z-index,但是這也似乎沒有幫助。

這裏是我的jsfiddle:http://jsfiddle.net/ML49V/12/ 如果有人遇到在此之前,有任何建議,我將不勝感激。

謝謝

+1

創建[的jsfiddle(http://jsfiddle.net/),在那裏你可以引用外部的js庫,並有你的問題的一個活生生的例子。 –

+0

我已編輯我的帖子,包括jsfiddle – Cortez1138

+0

所有的外部文件都404' –

回答

0

經過一番搜索,我找到了答案。如果將下面的行添加到多選項中,它將按預期工作。

工作的jsfiddle是在這裏:http://jsfiddle.net/ML49V/13/

stop: function (e, ui) { 
    var elements = ui.item.data('multidrag'); 
    ui.item.after(elements).remove(); 
}, 
helper: function (e, item) { 
    if (!item.hasClass("selected")) { 
     item.addClass("selected").siblings().removeClass("selected"); 
    } 
    var elements = item.parent().children(".selected").clone(); 
    item.data('multidrag', elements).siblings(".selected").remove(); 
    var helper = $('<li/>').css('list-style', 'none'); 
    helper.height('auto'); 
    return helper.append(elements); 
},