How to combine jQuery SlimScroll and sortableUI?

Issue

I wish to have two slimscrolled div and be able to drag and drop elements between them. The latter is tested, and is working perfectly with the sortable method, but when I apply the slimscrolls, the two divs receive the overflow: hidden attribute, which makes the dragged elements disappear when moved outside of the div. As per documentation I saw no option to modify the slimscroll’s overflow attribute, which I would like to change to overflow-x: visible and overflow-y: hidden, for obvious reasons. The CSS attribute is applied on element level, so workaround with CSS rules are not an option afaik.

I want the slimscroll to be functional, but I want to be able to drag and drop elements between the two slimscrolled divs. How to proceed?

EDIT

In hope of receiving answer I add a code example:

<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>

In the above example, elements from #container1 should be dragged to #container2, but due to the overflow:hidden property applied by the slimScroll(), the dragged element will disappear when dragged outside of the area of #container1. I wish to be able to drag the element and also see the element I am dragging.

Solution

The issue was a setting in jquery.slimscroll.js. In v1.3.8 starting from the 160th line I did the following;

// 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
      });

After applying the above change, the problem I described ceased to exist.

Answered By – Viktor

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0