javascript - jQuery Multisortable 与 CustomScrollBar

Question

我正在使用 mulisortable jquery 插件 (github.com/shvetsgroup/jquery.multisortable) 和 mcustomscrollbar 插件 (manos.malihu.gr/jquery-custom-content-scroller)，但我无法显示拖动的元素customscrollbar 容器的“overtop”。

例如，我有 4 个使用自定义滚动条的独立容器，在每个容器中我都有各种列表，这些列表由 multisortable 插件连接。我能够将所选元素从一个容器中的列表拖动到另一个容器中的列表，但是由于自定义滚动条将 overflow:hidden 添加到其容器中，因此拖动的元素会“落后于”列表/容器。

我的问题是:如何让拖动的元素出现在容器的前面

我尝试过的事情:

• 我已经从滚动条中删除了 overflow:hidden 属性，这就是我想要的，但是当滚动时，滚动的内容出现在容器之外，这是不好的。
• 我试过在多排序选项中使用 helper:"clone" 设置，但这似乎只克隆了一个元素(而不是多个)并且我的原始列表 css 做了意想不到的事情。<
• 我也尝试过在那些被选中的元素上设置 z-index，但这似乎也没有帮助。

这是我的 jsfiddle:http://jsfiddle.net/ML49V/12/如果有人以前遇到过这个问题并有任何建议，我将不胜感激。

谢谢

Answer 1

经过一番搜索，我找到了答案。如果您将以下行添加到 mulitsortable 选项，它将按预期工作。

工作的 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);
},