slimScroll.js and JQuery draggable

Question

Take a look at the picture. I have created 3 lists. The items in the list on the left hand side is draggable (jquery-ui v1.8.20). You can drag a picture from the list on the left hand side and drop them on the list in the middle. The lists can contain many pictures so I decided to add a scrollbar using slimScroll.js (v0.5) to get scrolling on those lists. When I drag an item from the list on the left hand side the item disappears behind the middle list. This has something to do with the implementation of the slimScroll plugin.

Do any of you have similar problems with the slimScroll together with jquery draggable? How did you fix it?

Answer 1

I found the solution to my problem

I added a the <div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></div> outside the other divs that make up the page:

<div id="mainCategorizerContainer">
    <div id="documentPageRecords" class="documentPagesRecordsArea ui-widget-header">
        <span></span>
    </div>    
    <div id="uncategorizedArea" class="uncategorized-area" >
        <div class="uncategorized-document-pages-list-area">
            <div id="scroll-content-uncategorizedPagesList" >
                <ul id="uncategorizedPagesList" class="gallery ui-helper-reset ui-widget ui-helper-clearfix uncategorizedPages">                      
                </ul>
            </div>
        </div>
    </div>  
    <div id="categorizedArea" class="categorized-area">
        <div class="document-category-list-area">
            <div id="scroll-content-documentCategoryList" >
                <ul id="documentCategoryList" class="ui-helper-reset">                                      
                </ul>
            </div>
        </div>
        <div class="categorized-document-pages-list-area">
        <div id="scroll-content-categorizedDocumentPagesList">
            <ul id="categorizedDocumentPagesList" class="ui-helper-reset" >                       
            </ul>
        </div>
        </div>
    </div>    
    <div id="splitDocumentDialog"><span id="splitDocumentDialogContent"></span></div>
    <div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></div>
</div> 

On the draggable list on the left hand side I added an appendTo option like this

uncategorizedPagesListDraggableOptions = {
            cancel: "a.ui-icon", 
            revert: "invalid", 
            containment: "document",
            helper: "clone",
            cursor: "move",
            appendTo: '#documentPageDraggableHelper'
        }