6

Available Items と Selected Items の 2 つのリストが必要です。Available Items は、ドラッグ アンド ドロップによって Selected Items に割り当てられます。選択したアイテムは並べ替え可能にする必要がありますが、使用可能なアイテムは必要ありません。課題は、両方のリストにかなりの数のアイテムが含まれる可能性があるため、スクロール可能にする必要があることです。

これが私がこれまでに持っているjQueryです：

        <script type="text/javascript">
        $(function() {
            $( "#available > li" ).draggable({ 
                revert: 'invalid',
                connectToSortable: '#selected',
                containment: '#drag_container'
            });

            $( "#selected" ).sortable({
                axis: 'y',
                placeholder: 'ui-state-highlight'
            });
        });
    </script>

対応する HTML:

            <div class="drag_container">
            <ul id="available" class="drag_column draggable">
                <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li>
                <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li>
                <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li>
                <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li>
                <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li>
                <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li>
                <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
                <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
            </ul>


            <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;">
                <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li>
                <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li>
                <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
                <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
                <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li>
                <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li>
                <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li>
                <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li>
                <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li>
                <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li>
                <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li>
                <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li>
            </ul>
            <div style="clear: both">&nbsp;</div>
        </div>

ただし、スクロール可能なリストが必要なため、ドラッグ可能な動作をエレガントに動作させることはできません ( http://pastehtml.com/view/1bsk6bt.htmlのデモを参照してください)。

ドラッグ中のアイテムが Available Items リストに入ると、スクロール可能なフレームの後ろに消えます。クローン ヘルパーを試してみました。また、div を含めたり、さまざまなオーバーフロー オプションを試したり、jQuery のスクロール オプションをオフにしたりしてみましたが、正しく動作させることはできません。私がここでやろうとしているのと同じようなことを誰かが達成して、時間を節約できると確信していますか? :)

どんな助けでも大歓迎です！

4

2 に答える 2

6

うわー！それは修正するのが楽しいものでした。

最初の問題は、リストが永遠に水平方向にスクロールするというもので、CSS のいくつかの簡単なオーバーフロー変更で修正しました。.drag_column から両方のオーバーフロー属性を削除し、overflow: hidden を .drag_container に追加しました。

.drag_container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px solid black;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.drag_column {
    padding: 5px;
    width: 490px;
    height: 200px;
    float: left;
    position: relative;
}

残念ながら、ドラッグ可能なリストをあるリストから別のリストに移動すると、位置エラーが発生しました（選択したリスト項目によっては、上に移動します）。これを修正するために、ドラッグ可能な作成関数に「helper: clone」という行を追加しました。

$( "#available > li" ).draggable({ 
    revert: 'invalid',
    connectToSortable: '#selected',
    containment: '#drag_container',
    helper: 'clone'
});

繰り返しますが、これは望ましくない効果を生み出しました。クローン ヘルパーは、元のリストからアイテムが削除されないようにします。これを修正するには、古いアイテムを削除する関数を手動で作成する必要がありました。私がしたことは、オブジェクト ID を取得して変数に入れる start: 関数をドラッグ可能なオブジェクトに追加したことです。次に、#selected リストのドロップ可能なオブジェクトを作成し、そこに drop: 関数を作成しました。そのドロップ関数は、一致する ID を持つオブジェクトに対して単純に slideUp(100) を実行します。スクリプトの開始時に変数を作成していることに注意してください。これにより、IE のバグが修正されます。

var dragged = null;
$(function() {
    $( "#available > li" ).draggable({ 
        revert: 'invalid',
        connectToSortable: '#selected',
        containment: '#drag_container',
        helper: 'clone',
        start: function(ui, event) {
            dragged = $(this).attr('id');
        }
    });
    $( "#selected" ).droppable({
        drop: function(event, ui) {
            var ident = "#" +  dragged;
            $(ident).slideUp(100);
        }
    });

完全な HTML を含むページをhttp://pastehtml.com/view/1by9nfd.htmlに投稿したので、必要に応じて遊んでみてください。お役に立てれば！

于 2010-11-16T22:33:33.853 に答える
1

この機能が必要で、これを行う方法を見つけました

appendTo: "body" を使用し、開始時に絶対位置を設定します。ドラッグされている要素はボディに追加され、その位置がボディに対して絶対的であるため、常に他の要素の「トップ」になります。

$( "#available > li" ).draggable({

    revert: 'invalid',
    appendTo: 'body',
    helper: 'clone',
    connectToSortable: '#selected',
    containment: '#drag_container',

start: function( event, ui ){

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone

},


stop: function(event, ui){

    $(ui.helper).css('position', 'relative'); // if you want

} 

});

お役に立てれば

于 2013-01-09T13:55:57.320 に答える