带有 CustomScrollBar 的 jQuery Multisortable

Posted 2023-05-09

【中文标题】带有 CustomScrollBar 的 jQuery Multisortable

【英文标题】：jQuery Multisortable with CustomScrollBar

【发布时间】：2014-01-08 12:44:30

【问题描述】：

我正在使用 mulisortable jquery 插件 (github.com/shvetsgroup/jquery.multisortable) 和 mcustomscrollbar 插件 (manos.malihu.gr/jquery-custom-content-scroller)，但无法显示拖动的项目海关滚动条容器的“上方”。

作为一个例子，我有 4 个使用自定义滚动条的独立容器，在每个容器内我都有各种列表，这些列表通过多排序插件连接。我可以将选定项目从一个容器中的列表拖动到另一个容器中的列表，但是由于自定义滚动条将overflow:hidden 添加到其容器中，因此拖动的项目会“落后于”列表/容器。

我的问题是：如何让拖拽的物品出现在容器的前面

我尝试过的事情：

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

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

谢谢

【问题讨论】：

创建一个jsfiddle，您可以在其中引用外部 Js 库，并为您的问题提供一个活生生的例子。

我已经编辑了我的帖子以包含 jsfiddle

你所有的外部文件都是 404 的

由于某种原因，它似乎在使用小提琴的 IE 中不起作用。但是它在 Chrome 中对我有用。

哦等等。他们现在也不在 Chrome 中工作。我不知道为什么会这样。

【参考方案1】：

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

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