2

初期状態が非表示 (つまり、display:none) のソート可能なリストに要素をドラッグできないようです。

各行の html は次のようになります。

<div class="dragbox" id="item1" >
  <h2>Expression 1<span id="exp1"></span></h2>
  <div class="dragbox-content" >
    <ul class="dragrow1"></ul>
    <ul class="dragrow2"></ul>
  </div>
</div>

しかし、フィールドを 'dragrow*' にドロップできるようにするには、div 'dragbox-content' に 'display:block' のスタイルが必要です。これは、メインの css スタイルで記述するか、div 自体にハードコードすることができます (例: )

問題は、ページの読み込み時に、すべての行 (または少なくとも 1 つを除くすべて) を閉じたいということです。これは、最初は「display」を「none」に設定する必要があることを意味します。この部分は簡単です。一部の jQuery は、ready() イベント内でページの読み込み時にこの css を変更できます。

$('.dragbox')
.each(function(){
  $(this).find('.dragbox-content').hide();
});

また、「toggle」と呼ばれる jQuery コマンドがあり、h2 タグをクリックすると、この css 表示がブロックとなしの間で自動的に切り替わります。したがって、各行を表示または非表示にすることができます。

そのため... 行が ready() イベント内で表示されている場合 (display:block)、アイテムを並べ替え可能なリストにドラッグすることができます (行の表示と非表示を切り替えても)。

しかし... 行が ready() イベント内で非表示 (display:none) の場合、アイテムをソート可能なリストにドラッグすることはできません。

何か案は？本当にこれに引っかかった...

4

3 に答える 3

5

これは手遅れかもしれませんが、ここに解決策があります (他の人を助けることができるかもしれません)。トリックは、ソート可能をリフレッシュする必要があるということです。

$('.dragitem').draggable({
    start: function() {
        // show your dropzone
        $('#dropzone').show();

        // refresh your sortable -- so you can drop
        $('#dropzone').sortable('refresh');
    }
});
于 2011-10-07T16:51:33.583 に答える
0

connectToSortableオプションを使用できます例

//getter
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//setter
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

http://docs.jquery.com/UI/Draggable#option-connectToSortable

于 2010-01-25T11:01:24.927 に答える
0

これが制約内で許容できる解決策であるかどうかは完全にはわかりませんが、ドラッグする要素を表示する必要があるため、ドラッグが開始されたときに要素を再表示することをお勧めします. そうすれば、本当に必要になるまで表示されません。

次のようなことができます。

$('.listOfDraggableItems').draggable({
    start: function(event, ui) {
        $('.dragbox').each(function(){
            $(this).find('.dragbox-content').show();
        });
    }
});
于 2010-01-25T11:31:50.973 に答える