1

ユーザーがドラッグ アンド ドロップで並べ替えて、変更内容をデータベースに送信できるようにしたい HTML リストがあります。

私はすべてのデータベースに満足していますが、Javascript/JQuery に苦労しています。

現在、jQuery UI Sortableは正常に動作しています (したがって、ドラッグ アンド ドロップで他の要素と並べ替え要素を並べ替えることができます) が、SUBMIT の新しい順序を取得する方法がわかりません。

誰でも助けることができますか？さらに情報が必要な場合は、言ってください。ありがとう！

4

3 に答える 3

6

たとえば、AJAX呼び出しを介してそのデータをアプリケーションに送信します

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

唯一の注意点は、リスト項目に ID を の形式で指定する必要があることですgroupname_identifier。例えば：

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

次に、アプリケーションが POST データを受け取ると、次のような配列になります。

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)
于 2012-05-24T12:22:14.780 に答える
1

@ serialize() を見てください。明示的な送信ボタンなしで同じことを作成しましたが、mootools を使用して ajax によって直接注文を注入します。

<script language="javascript">
            <!--
            window.addEvent('domready', function() {
                var thisSortables = new Sortables($('list'), {
                    constrain: true,
                    clone: true,
                    revert: true,
                    onStart: function() {
                        $('confirm').set('html', '');
                    },
                    onComplete: function() {
                        this.serialize(function(el, index) {
                            var updateOrderRequest = new Request.HTML({
                                url: '../module/tools/admgn/dbsorter.php',
                                method: 'post',
                                data: {'itemID': el.id.replace("item_",""), 'new_pos':(index+1)}
                            }).send();
                        });
                        $('confirm').set('html', 'Reihenfolge erfolgreich gespeichert.');
                    }
                });
            });
            -->
        </script>

どうすればそれを機能させることができるかがわかるかもしれません。

于 2012-05-24T12:22:21.843 に答える
1

<UL>and<OL>は post メソッドで取得できないフォーム要素ではないので、これでできるといいのですが

http://quasipartikel.at/multiselect_next/

すべてのオプションを選択状態にし、使用可能なパーツを非表示として非表示にします

于 2012-05-24T12:30:16.723 に答える