1

写真を見てください。3つのリストを作成しました。左側のリストの項目はドラッグ可能です (jquery-ui v1.8.20)。左側のリストから画像をドラッグして、中央のリストにドロップできます。リストには多くの画像を含めることができるので、それらのリストをスクロールできるように、slimScroll.js (v0.5) を使用してスクロールバーを追加することにしました。左側のリストから項目をドラッグすると、項目が中央のリストの後ろに消えます。これは、slimScroll プラグインの実装と関係があります。

jquery ドラッグ可能と一緒に slimScroll で同様の問題を抱えている人はいますか? どのように修正しましたか？

ここに画像の説明を入力

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

uncategorizedPagesListDruggableOptions = { cancel: "a.ui-icon", revert: "invalid", 包含: "document", helper: "clone", cursor: "move", appendTo: '#documentPageDruggableHelper' }

'helper: "clone"' および 'appendTo: "body"' これらの属性は、ドラッグ可能な要素を複製し、body に追加して、ページ上で自由にドラッグできるようにします。

于 2015-07-03T06:46:34.840 に答える