2

https://github.com/aehlke/tag-it (デモ - http://aehlke.github.com/tag-it/examples.html )の tag-it プラグインを使用しています。

このコードには、入力されたタグを別の入力、テキストエリアなどに表示するオプションがあります。最初のオプション -

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,

            singleField: true,
            singleFieldNode: $('#mySingleField')
        });

ここで、id -#singleFieldTagsは入力フィールドであり、id のようなリストであり<ul、#mySingleField「リスト順」のタグをそれぞれの間にカンマで表示します。

で追加および削除されたすべてのタグが に#singleFieldTags表示され#mySingleFieldます。tag-it には組み込みの並べ替え機能がないsortable()ため、 でタグの順序を変更するために を追加しても、 のタグの#singleFieldTags順序は変更されません#mySingleField。

2番目のオプションは、次のようなプレーンです#singleFieldTags:-

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,
        });

tag-it.js には がありますが、上記のタグのリストが の間に配置されているため、php フォームを送信した後、値は mysql テーブルに表示されません<li></li>。

タグを並べ替え可能にし、リスト フィールド内のタグの同じ配置が最初のオプション<ulのように表示されるようにするにはどうすればよいですか? または、単一のフィールド内でタグを並べ替えて、フォームから送信できるようにする<textareaという 2 番目のオプションはどのように機能しますか?<input

編集: ここに tagit と呼ばれる Tag-it のような同様のプラグインがあります: http://webspirited.com/tagit/。このプラグインは、タグが交換された場合に入力ボックスを意味するソート可能であり、フォームに送信されるとソート順に表示されます。ただし、カスタムのテーマローラー テーマがあり、これらは類似しておらず、jQuery UI (jqueryui.com) のものとリンクすることさえできないという欠点があります。

しかし一方で、tag-it プラグイン (tagit ではない) は、これらのテーマをロードできますが、並べ替え機能は提供しません。

4

1 に答える 1

4

tag-itプラグインを使用するソリューションは次のとおりです。不足している機能が引用符で説明されていることを理解しています。「...sortable（）を追加して#singleFieldTagsのタグの順序を変更しても、のタグの順序は変更されません。 #mySingleField "。

「#mySingleField」に新しい並べ替え順序を反映させるために、sortable（）の停止イベントにハンドラーを追加しています。

$('#singleFieldTags').sortable({
    stop: function(event,ui) {
        $('#mySingleField').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
    }
});

と

$('#singleFieldTags2').siblings(".tagit").sortable({
    stop: function(event,ui) {
        $('#singleFieldTags2').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
        console.log( $('#singleFieldTags2').val() );        // just for reference
    }
});

これは、機能 （単一の入力フィールドに追加された機能）を示すjsfiddleです。

于 2013-02-10T13:00:41.840 に答える