6

JQuery UI Sortable は、ギャップのないリストにはうまく機能しますが、たとえば、ギャップのあるアイテムのリストをレンダリングしたいとします。

1、2、空、4、5、6、空、8

ここで、数字はスロット番号を表します。ユーザーがスロット 2 に要素をドラッグすると、2 の値が空のスロット 3 にプッシュされ、新しい要素をスロット 2 にドロップできます。空の 3 スロットでは、リスト アイテムは押し下げられず、ユーザーは新しいアイテムを空の 3 スロットにドロップできます。うまくいけば、これは理にかなっています。

私はJQuery UI Sortableコードを見てきましたが、これを達成するには変更を利用してコールバックを受け取る必要があるようですが、一般的にJQuery/JSに慣れていないため、何を使用すればよいかわかりませんこれらの空のスロット プレースホルダーを追加し、選択リストを管理して、カスタム コードで並べ替え機能を壊さないようにします。

ポインタ、例などは大歓迎です。

これについてしばらく頭を悩ませた後、jsFiddle を作成しました: http://jsfiddle.net/pdHnX/

問題を説明するのに役立ちます。私が達成しようとしているすべてのことは、オーバーライドされた _rearrange メソッドで実現できると信じています。フィドル コードは、アイテムがフィラー アイテムを置き換えるケースを処理しますが、奇妙な問題があります。アイテム リストからフィラー リストにアイテムをドラッグすると、アイテムをドロップしてから、フィラー リスト内で同じアイテムをドラッグします。 、フィラー リストが 1 縮小されますが、これは問題です。

より多くの項目をフィラー リストにドラッグし始めると、さらに多くの問題が発生しますが、これが現時点での問題です。

4

3 に答える 3

9

正しく理解できたかどうかわかりませんが、私が思いついたのは次のとおりです。

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

仮定:

  • 一番上のリストから項目をドラッグすると、「複製」されます (オリジナルはリストに残ります)。
  • 一番下のリストから項目をドラッグすると、項目が移動します (プレースホルダーは空のままになります)。
  • 一番下のリストのプレースホルダーにアイテムをドロップすると、プレースホルダーが置き換えられます
  • 一番下のリストの空でないプレースホルダー/アイテムにアイテムをドロップすると、それが置き換えられます
  • 両方のリストのサイズは常に同じままです

これが役立つか、それとも何か他のものを探しているかどうか教えてください。また、タスク全体（このドラッグの目的は何ですか）を説明すると役立つ場合があります:-)

于 2012-09-06T10:05:07.867 に答える
1

申し訳ありませんが、これは詳細を説明するのが非常に難しい質問でした。要件は非常に具体的で、説明するのが困難でした。

これが私が探していた解決策です。

ここでの他の回答は、説明が不十分な問題の解決策である可能性がありますが、私が探していたものではありませんでした。

http://jsfiddle.net/vfezJ/

残念ながら、sortable.js コードは非常に複雑なので、そこにリンクされているコードも非常に複雑です。私が投稿したソリューションでは、作業を完了するために CSS クラスと DOM ID に関するいくつかの仮定も行っています。

于 2012-09-14T15:27:00.160 に答える
0

http://jsbin.com/igozat/2

これが私が作ったものです。sortable（）はドラッグの途中で中断できないため、完全ではなく、多くのクレジットに値するものでもありません。それが可能であれば、ドロップアクションが完全に引き継ぐ可能性があります。また、並べ替えの試みはバグが多かった。このメソッドは通常のjQueryでのみ機能することは知っていますが、jQueryUIでは機能しませんでした。

ぎくしゃくしたように聞こえるリスクがありますが、それが私なら、jQueryだけで機能を記述します。jQuery UIは、完全に取り締まっているわけではありません。：P

于 2012-09-11T17:49:40.207 に答える