Question

看看图片。我创建了3个列表。左侧列表中的项目是可拖动的（jquery-ui v1.8.20）。您可以从左侧列表中拖动图片并将其放在中间的列表中。列表可以包含许多图片，因此我决定使用slimScroll.js（v0.5）添加滚动条以滚动这些列表。当我从左侧列表中拖动项目时，该项目将消失在中间列表后面。这与slimScroll插件的实现有关。

你们有没有与slimScroll和jquery draggable一样的问题？你是怎么解决的？

enter image description here

Answer 1

我找到了解决问题的方法

我在构成页面的其他div之外添加了<div id="documentPageDraggableHelper" class="gallery ui-helper-reset"></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 = { 取消：＆＃34; a.ui-icon＆＃34;，还原：＆＃34;无效＆＃34;，遏制：＆＃34;文件＆＃34;，帮手：＆＃34;克隆＆＃34;，光标：＆＃34;移动＆＃34;， appendTo：＆＃39; #documentPageDraggableHelper＆＃39; }

＆＃39;帮助者：＆＃34;克隆＆＃34;＆＃39;并且＆＃39; appendTo：＆＃34; body＆＃34;＆＃39;这些属性克隆可拖动元素并附加到正文以便在页面上自由拖动

slimScroll.js和JQuery draggable

2 个答案: