1

互いに接続された 2 つの並べ替え可能なリストを表示するコード スニペットがあります。すべてがうまく機能しています。

デモ - jsFiddle の例

デモでは、文字はソート可能の先頭、末尾、またはその間にドロップされます。一般に、すべての文字はスクイーズされ、空白はありません。それは sortable の自然な動作です。しかし、今は別の方法で文字を移動 (ドラッグ & ドロップ) したいと考えています。

位置 3 から文字を移動したいと思います [たとえば、文字 N] 左側ではなく、下のリストの位置 3 にドロップします。そして、ソート可能なリスト[現在はNの文字がありません]がスクイズされないようにしたいのですが、それらの間のギャップはそのままにしておく必要があります。文字/空白を互いに並べ替えることができるように、ul要素で並べ替え可能な動作を維持したいことを除いて、ギャップを他の場所に移動しますが、同じ並べ替え可能なリストでのみです。

私はli要素のスパンでそれをやろうとしましたが、リストを切り離してドラッグ可能とドロップ可能だけを使用しましたが、それを正しくする方法がわかりません。私は2つの方法を試しました。

FIRST : li 要素にスパンを追加して、li 要素がある種のバケツになるようにします (各バケツには 1 つの文字のみを含めることができます)。そして、次を追加するだけです：

    $("#letters li span").draggable({
         connectToSortable: "#subword",
         revert: "invalid"
    });

    $("#subword li span").draggable({
         connectToSortable: "#letters",
         revert: "invalid"
    });

しかし、ドラッグアンドドロップ先のli要素内ではなく、ソート可能の最後にスパンを置くだけです。

SECOND : li ドロップ可能およびスパン ドラッグ可能に追加しますが、i は li でソート可能を使用できません。私は常にliの上にあるspan要素をドラッグします。

私は行き止まりになっているので、誰かが私を助けてくれませんか。何かがよく説明されていない場合は、質問してください。前もって感謝します！

4

1 に答える 1

1

デモ: http://jsfiddle.net/proqb/5qupZ/

JS の短いスニペットを次に示します。

$(function () {
    $("#sortable1").sortable();
    $("#sortable2").sortable();

    $(".droppable").droppable({
        accept: ".alienNode",
        drop: function (event, ui) {

                    ui.draggable.parent().droppable("enable");

            $(this).append("<div class='alienNode'>" + ui.draggable.html() + '</div>');

            ui.draggable.remove();

            $(this).find(".alienNode").draggable({
                handle: ".handler",
                revert: "invalid"
            });

            $(this).droppable("disable");

        }
    });

    $(".prerender").droppable("disable");

    $(".alienNode").draggable({
        handle: ".handler",
        revert: "invalid"
    });
});

このソリューションの一般的な考え方は、connectedSortable を使用しないことです。

代わりに、2 つの並べ替え可能なリストがあります。各リストには、ドラッグ可能なドロップ可能要素が含まれています (現在は透明です。表示したい場合は、背景色属性を指定できます)。これらの子ノードは、特定のクラス属性を持つ要素のみを受け入れるため、そこに特定のノードのみをドロップできます。最後に、この Fixed Class Attribute を持ち、両方のリストにドロップできる純粋な Draggable である内部ノードがあります。

もちろん、並べ替え可能なリストの長さは動的に変更できるため、開始要素の固定数に制限する必要はありませんが、それはあなたとあなたのニーズ次第です。

私のソリューションを使用したい場合は、次のようないくつかのケースを解決する必要があります。

1) onRevert イベントのカスタマイズ (これは JQuery で定義されたイベントではなく、その誤動作によりノードの重複が発生する可能性があります)、またはそのメカニズムを別のものに置き換えることができます。

2) 並べ替え可能な UL-s の背景画像グリッドを作成して、要素をドラッグできる場所を表示したり、プレースホルダー メカニズムを実装したりすることができます。

3) 適切なハンドラーを作成して、ノードを直感的にドラッグできるようにします。現在、文字 (内部ノードのハンドラー) または黒の背景 (内部ノード コンテナーのハンドラーのように機能) のいずれかでドラッグできます。

4) ドラッグ可能なものをドロップ領域に貼り付けることも良い考えです。

以前に開発したメカニズムは私のソリューションでは機能しないと思いますが、私の例で再実装してみてください。

最後に - 他の問題が発生した場合は、メカニズムをより迅速かつ正確にカスタマイズしたい場合は、より多くのオプションがある YUI にいつでも切り替えることができます。 dd/ :)

とにかく、これのいくつかがあなたに役立つことを願っています:)

于 2013-03-12T05:17:52.050 に答える