12

これをより効率的に行う方法を学ぶために、これを改善する方法や、間違った道を一緒に歩いているかどうかについての考えに興味があります。

これまでのところ、 http://jsfiddle.net/mstefanko/LEjf8/9/を書いています。

これは、基本的に私が望んでいることを小規模で処理します。

いくつかのバグがあり、これが記述できるほど優れているとはまったく確信が持てません。jquery ui ソート可能にラッチしようとしないのはばかかもしれません。しかし、アイテムの単純なリストなしでこれを行う必要があり、これを複数のドラッグ アンド ドロップを含むように拡張したいので、方法を学ぶだけであっても、これを実現するために必要なことを少なくとも説明したいと思いました。これらの機能のようなソート機能。

問題児、

これはすべて、droppable() の over イベントで呼び出される関数にあります。

私は空のスポットの配列を持っています

    var emptyHolders = [];

    $('.pipeline-holder').each(function(){
        if($(this).hasClass('holder-empty')){
            var eid = $(this).attr('id');
            emptyHolders.push(eid.substring(14));
        }
    });

cid はあなたが上にいるドロップ可能な要素なので、使用して次の開いているスロットを見つけます

   for (var i = 0; i < emptyHolders.length; i++) {
        var currentEmpty = emptyHolders[i];
        if (currentEmpty > cid) {
            nextEmpty = currentEmpty;
            i = emptyHolders.length;
        } else {
            prevEmpty = parseInt(currentEmpty);
        }
    }

リストのさらに下に空のスロットがある場合は、for ループを使用して、要素をドロップするために必要なスペースを作るために、DOM 内でアイテムを移動することをループします。

 if (nextEmpty != null) {
        var moveMe = nextEmpty -1;

        for (var i = moveMe; i >= cid; i--) {

            var nextcount = i + 1;
            var me = $('#pipeline-rank-' + i);       
            var next = $('#pipeline-rank-' + i).parents('.pipeline-rank-row').next().find('.pipeline-holder');
            var pid = $('#pipeline-rank-' + i).find('.content-wrapper').attr('id');

            next.append($('#pipeline-rank-' + i).find('.content-wrapper'));
            next.removeClass('holder-empty');
            next.siblings('.remember-my-position-hover').html(pid);
        }
         $('#pipeline-rank-' + cid).addClass('holder-empty');
    }

リストの下に 1 つも存在しない場合は、同じことを逆に実行して、ドロップ可能アイテムの上にアイテムをプッシュする場所があるかどうかを確認します。

どんな考えでも大歓迎です！

4

1 に答える 1

3

このような場合は、jQuery セレクターを使用するよりも、DOM 要素を直接操作し、それらへの参照を配列に保持する方がおそらく価値があります。あなたはこれを始めましたemptyHoldersが、私はすべてのコンテナ（ドロップ可能な要素）に対してそれを行います.

2 つのリスト/配列を保持します。1 つはドラッグ前の状態で、もう 1 つは表示します。ドラッグが新しいコンテナを通過するたびに、最初に状態をドラッグ前の状態にリセットし、そこから変更された状態を再計算してから、新しい変更された状態を表示します。（ちらつきを避けるために、実際にはドラッグ前の状態を表示せず、内部リストをそれにリセットするだけです。） そうすれば、新しい追加でリストが邪魔されるのをできるだけ避けることができます。

新しい要素のためのスペースを確保するには、次のことをお勧めします。

  • 現在の要素が空の場合、変更はありません。
  • 現在の要素が空ではなく、その上に空のスペースがある場合、現在のスペースが空になるまで、空のスペースの下にある項目を 1 つ上に移動します。
  • 上にスペースがない場合は項目を下に移動し、リストに空のスペースがない場合はリストを拡張します。

つまり、私があなたのニーズを正しく理解していると仮定します。より一般的なケースは、空のスペースをどこにも許可しないことです。すべての挿入は、リストの最後またはリストの先頭に追加されるか、スペースが追加されずに 2 つのリスト メンバーの間に挿入されます。リストに何かをドロップすると、別のアイテムに遭遇するか、リストの最初のアイテムになるまで、すぐに浮き上がります。

于 2013-04-29T00:04:30.653 に答える