1

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

你们中的任何人都对 slimScroll 和 jquery draggable 有类似的问题吗？你怎么修好它的？

在此处输入图像描述

4

2 回答 2

0

我找到了解决问题的方法

我在<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'
        }
于 2012-09-07T12:12:31.147 回答
0

uncategorizedPagesListDraggableOptions = { 取消：“a.ui-icon”，恢复：“无效”，包含：“文档”，助手：“克隆”，光标：“移动”，appendTo：'#documentPageDraggableHelper' }

'helper: "clone"' 和 'appendTo: "body"' 这些属性克隆可拖动元素并附加到 body 以便在页面上自由拖动

于 2015-07-03T06:46:34.840 回答