时间戳

首页 > 解决方案 > 如何结合 jQuery SlimScroll 和 sortableUI？

javascript - 如何结合 jQuery SlimScroll 和 sortableUI？

问题描述

我希望有两个 slimscrolled div 并能够在它们之间拖放元素。后者经过测试，并且与sortable方法完美配合，但是当我应用 slimscrolls 时，两个 div 接收到该overflow: hidden属性，这使得拖动的元素在移出 div 时消失。根据文档，我没有看到修改 slimscroll 的溢出属性的选项，出于显而易见的原因，我想将其更改为overflow-x: visibleand 。overflow-y: hiddenCSS 属性应用于元素级别，因此使用 CSS 规则的解决方法不是一个选项 afaik。

我希望 slimscroll 能够正常工作，但我希望能够在两个 slimscrolled div 之间拖放元素。如何进行？

编辑

为了得到答案，我添加了一个代码示例：

<div id="container1">
  <ul><li>...</li></ul>
</div>

<div id="container2">
  <ul><li>...</li></ul>
</div>

<script>
  $('#container1').slimScroll({...});
  $('#container2').slimScroll({...});
  $('#container1').sortable({
    connectWith: "#container2",
  });
</script>

在上面的例子中，#container1 中的元素应该被拖到#container2 中，但是由于overflow:hidden应用的属性slimScroll()，被拖出的元素会在拖出 的区域时消失#container1。我希望能够拖动元素并看到我正在拖动的元素。

标签： javascriptjquerycss

解决方案

问题是 jquery.slimscroll.js 中的一个设置。在从第 160 行开始的 v1.3.8 中，我执行了以下操作；

// wrap content
    var wrapper = $(divS)
      .addClass(o.wrapperClass)
      .css({
        position: 'relative',
        overflow: 'visible', // <--- change this from 'hidden' to 'visible' !!!
        width: o.width,
        height: o.height
      });

应用上述更改后，我描述的问题不复存在。

推荐阅读