如何将jQuery SlimScroll与sortableUI结合实现跨容器元素拖拽

解决方案 #

方案1：使用Sortable原生配置实现（优先推荐） #

无需修改slimScroll的任何样式或源码，完全规避父容器overflow裁剪问题：
jQuery UI Sortable 提供了appendTo和helper配置项，可将拖拽过程中的辅助元素直接挂载到body节点下，完全不受父容器overflow:hidden的限制。
示例代码如下：

<div id="container1">
  <ul><li>元素1</li><li>元素2</li></ul>
</div>

<div id="container2">
  <ul><li>元素3</li><li>元素4</li></ul>
</div>

<script>
// 初始化slimScroll
$('#container1, #container2').slimScroll({
  // 保留你原有的slimScroll配置
  height: '300px'
});

// 初始化双向可拖拽的sortable
$('#container1, #container2').sortable({
  connectWith: "#container1, #container2", // 支持两个容器互相拖拽
  appendTo: 'body', // 拖拽辅助元素挂载到body
  helper: 'clone', // 使用克隆元素作为拖拽对象
  start: function(event, ui) {
    // 拖拽开始时隐藏原元素，避免同屏出现两个相同元素
    ui.item.css('opacity', '0');
  },
  stop: function(event, ui) {
    // 拖拽结束后恢复原元素透明度
    ui.item.css('opacity', '1');
  }
});
</script>

该方案完全不影响slimScroll的滚动功能，兼容性最好，不会出现样式冲突问题。

方案2：直接修改slimScroll容器的行内样式 #

行内样式可通过JS直接修改，无需依赖CSS覆盖，修改后slimScroll的纵向滚动功能不受影响：

$('#container1, #container2').slimScroll({
  // 原有配置
}).css({
  'overflow-x': 'visible !important',
  'overflow-y': 'hidden' // 若需要保留纵向滚动可改为auto
});

如果slimScroll在窗口尺寸变化时会重写行内样式，可监听resize事件重新赋值即可。

方案3：修改slimScroll源码（适合长期使用的场景） #

直接打开slimScroll的源码文件，搜索设置overflow: hidden的代码行，直接替换为你需要的overflow-x: visible; overflow-y: hidden，后续初始化的所有slimScroll容器都会默认使用该样式，无需额外处理。

内容的提问来源于stack exchange，提问作者Viktor