1

リストから別のリストに項目をドラッグ アンド ドロップするための次の JQuery セットアップがあります。

// Set what items are draggable
$(".widgetListItems").draggable(
{
    cursor: "move",
    opacity: 0.5,
    scroll: false,
    revert: "invalid",
    connectToSortable: "#dropList",
    stop: function (event, ui) { if (deleteItem) { ui.helper.remove(); deleteItem = false; } }
});

// Set what items can have objects dropped into them.
$(".dropableArea").droppable(
{
    accept: ".widgetListItems",
    tolerance: "touch",
    drop: function (event, ui)
    {
        deleteItem = true;

        var item = $(ui.draggable).text();
        item = $.trim(item);

        switch (item)
        {
            case "Preventative Care":
                $(this).append($("#panelPreventative"));
                $("#panelPreventative").show(1000);
                break;
            case "Medical Claims":
                $(this).append($("#panelMedicalClaims"));
                $("#panelMedicalClaims").show(1000);
                break;
            case "Capitation":
                $(this).append($("#panelCapitation"));
                $("#panelCapitation").show(1000);
                break;
        }
    }
});

$(".dropableArea").sortable(
{
    cursor: "move",
    connectWith: ".dropableArea",
    update: function (event, ui)
    {
        $(ui.item).css("margin", "30px 0px");
    }
});

ユーザーが<li>画面にドラッグできるクラス「widgetListItems」があります。次に、droppable は<ul>with クラス "dropableArea" です。ユーザーに体験してもらいたいのは、アイテムをリストにドロップすると、ドロップしたアイテムが削除され、代わりに「loadedWidgetPanel」クラスのウィジェットが表示されることです。それが、「ドロップ」イベントで行っていることです。また、ユーザーがアイテムをドロップできるこのリストをソート可能にしたいと思います。私が持っているコードを使用すると、ユーザーはアイテムをリストにドロップでき、ウィジェットが表示され、ページに表示されたらウィジェットを並べ替えることができます。

私が疑問に思っているのは、ユーザーが要素をリストにドロップすると、最後に追加されるのではなく、ユーザーがドロップした場所にウィジェットが挿入されるように、このリストをソートできるかどうかです。「ドロップ」イベントで行っているために追加されていることはわかっていますが、別のアイテムを挿入する別の方法がわかりません。誰かが私を助けることができますか？

4

1 に答える 1

2

これdrop: function() {}は、アイテムがドロップされたときに発生するコールバックです。既に持っているロジックを実行した後、並べ替えルーチンへの呼び出しを追加できます。手っ取り早く汚いjqueryのアルファベット順ソートの例。

于 2012-11-14T15:11:05.287 に答える