可拖动的slimScroll.js和JQuery

Question

看一下这张图片。我已经创建了3个列表。左侧列表中的项目是可拖动的(jquery-UIv1.8.20)。您可以将图片从左侧的列表中拖放到中间的列表中。这些列表可以包含许多图片，所以我决定使用slimScroll.js (v0.5)添加一个滚动条来滚动这些列表。当我从左侧的列表中拖动一个项目时，该项目将消失在中间列表的后面。这与slimScroll插件的实现有关。

你们中有谁在使用slimScroll和jquery draggable时遇到过类似的问题吗？你是怎么修复它的？

​

​

Answer 1

我找到了我的问题的解决方案

我在组成页面的其他<div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></div>之外添加了一个div：

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

在左侧的可拖动列表中，我添加了一个appendTo选项，如下所示

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

Answer 2

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

‘'helper：" clone "’和'appendTo：" body "‘这两个属性克隆可拖动元素并附加到body，以便在页面上自由拖动